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 class="content-item">
                    <div class="item-image">
                        <img src="@/assets/img/home/banner.png" alt="气象预警" />
                    </div>
                    <div class="item-content">
                        <div class="item-text">周边5km出现了高温灼烧气象预警, 请注意某某防范!</div>
                        <div class="item-date">2022-11-12</div>
                    </div>
                </div>
                <div class="content-item">
                    <div class="item-image">
                        <img src="@/assets/img/home/banner.png" alt="气象预警" />
                    </div>
                    <div class="item-content">
                        <div class="item-text">周边3km出现了暴雨预警, 请注意防范!</div>
                        <div class="item-date">2022-11-10</div>
                    </div>
                </div>
            </div>

            <!-- 农事预警内容 -->
            <div v-if="activeTab === 'agricultural'" class="content-list">
                <div class="content-item">
                    <div class="item-image">
                        <img src="@/assets/img/home/banner.png" alt="农事预警" />
                    </div>
                    <div class="item-content">
                        <div class="item-text">建议进行病虫害防治, 注意观察作物生长情况</div>
                        <div class="item-date">2022-11-11</div>
                    </div>
                </div>
            </div>

            <!-- 专家问答内容 -->
            <div v-if="activeTab === 'expert'" class="content-list">
                <div class="content-item">
                    <div class="item-image">
                        <img src="@/assets/img/home/banner.png" alt="专家问答" />
                    </div>
                    <div class="item-content">
                        <div class="item-text">专家解答: 如何提高作物产量? 建议合理施肥...</div>
                        <div class="item-date">2022-11-09</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const activeTab = ref("weather");

const tabs = [
    { label: "气象预警", value: "weather" },
    { label: "农事预警", value: "agricultural" },
    { label: "专家问答", value: "expert" }
];
</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;
            font-size: 14px;
            &.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;
            }
        }
    }
}
</style>