foster-pc-vue/src/views/warningHome/components/album.vue

<template>
    <div class="album-page">
        <div class="album-wrap" ref="scrollContainer">
            <div class="barrage-title">
                <img src="@/assets/images/common/chart-icon.png" />
                智慧农场
            </div>
            <div class="album-content">
                <div class="album-top" v-if="farmDetail?.name">
                    <div class="album-img">
                        <img src="@/assets/images/warningHome/t.png" />
                        <!-- <img :src="farmDetail.icon" /> -->
                    </div>
                    <div class="garden-content">
                        <div class="garden-name">
                            农场名称：{{ farmDetail.name }}
                            <div class="tag-wrap">
                                <div class="type-tag">{{ farmDetail.speciesName }}</div>
                                <div class="type-tag item-type">{{ farmDetail.typeName }}</div>
                            </div>
                        </div>
                        <div class="garden-desc">农场面积：{{ farmDetail.mianji }}亩</div>
                        <div class="garden-desc">农场位置：{{ farmDetail.address }}</div>
                    </div>
                </div>
                <div class="album-bottom">
                    <el-affix :offset="44" target=".album-bottom">
                        <div class="album-l">
                            <el-menu default-active="0" class="el-menu-vertical-demo">
                                <el-menu-item
                                    v-for="(item, index) in farmWorkList"
                                    :key="index"
                                    :index="index.toString()"
                                    :id="'menu' + index"
                                    :class="{ active: activeSection === index }"
                                    @click="scrollToSection(index)"
                                    v-show="item.menu"
                                >
                                    <img
                                        class="menu-icon"
                                        :src="
                                            require('@/assets/images/warningHome/gallery/icon-' +
                                                item.icon +
                                                (item.statuss === 0 ? '-no' : '') +
                                                '.png')
                                        "
                                    />
                                    <div
                                        :class="[
                                            'menu-name',
                                            {
                                                noTime: item.status === 0,
                                                onTime: item.status === 2,
                                                now: item.status === 1,
                                            },
                                        ]"
                                    >
                                        {{ item.farmWorkName }}
                                    </div>
                                </el-menu-item>
                            </el-menu>
                        </div>
                    </el-affix>
                    <!-- <div class="export-btn">
                        <div class="btn-item"><img src="@/assets/img/old_mini/export.png" />导出</div>
                    </div> -->
                    <div class="album-r" @scroll="debouncedHandleScroll2">
                        <div
                            class="done-card section"
                            v-for="(card, cardI) in farmWorkList"
                            :key="cardI"
                            :class="{ flashing: card.status === 1 && isFlashing }"
                        >
                            <div class="card-dom" :id="'section' + cardI"></div>
                            <!-- <div v-if="card.status === 1" class="log-wrap">
                                <div class="log-box">
                                    <div class="log-title PangMenZhengDao-FONT">果园日志</div>
                                    <div class="log-content">
                                        <div class="log-desc" v-html="indicatorChartData?.content">
                                        </div>
                                        <indicatorChart
                                            :key="cardI + 'log'"
                                            :indexName="card.indexName"
                                            type="feature"
                                            :chartData="indicatorChartData"
                                        ></indicatorChart>
                                    </div>
                                </div>
                            </div> -->
                            <div class="card-wrap" :class="{ noCarousel: card.status !== 0 }">
                                <div
                                    class="card-content"
                                    :class="{ push: card.status === 1, hasBg: card.status === 2 && !card.hasBg }"
                                >
                                    <div
                                        class="card-top"
                                        @click="showDetail(card)"
                                        :class="{ noChart: !card.indexChart.length }"
                                    >
                                        <div class="card-title serve-title">
                                            <div class="title-name">{{ card.farmWorkName }}</div>
                                            <div v-if="card.type === 1" class="status-tag standard">标准农事</div>
                                            <div v-if="card.type === 2" class="status-tag advice">推荐农事</div>
                                            <div v-if="card.type === 0" class="status-tag warning">预警农事</div>
                                            <!-- 右上角角标 -->
                                            <div v-if="card.status === 2 && card.execute === 0" class="add-btn">
                                                未触发
                                            </div>
                                            <div
                                                v-if="card.status === 2 && card.execute === 2"
                                                class="add-btn unactive"
                                            >
                                                未激活
                                            </div>
                                            <div v-if="card.execute === 3" class="add-btn">待执行</div>
                                            <div v-if="card.status === 0 && card.execute === 4" class="add-btn recheck">
                                                已完成
                                            </div>
                                            <div v-if="card.status === 0 && card.reCheck === 1" class="add-btn recheck">
                                                已复核
                                            </div>
                                            <div v-if="card.execute === 1" class="add-btn unactive">已失效</div>
                                        </div>
                                        <div class="card-desc">
                                            <span class="desc-title">触发条件：</span>
                                            {{ card.condition }}
                                        </div>
                                        <div class="card-desc">
                                            <span class="desc-title">农事编号：</span>
                                            {{ card.code }}
                                        </div>
                                        <div v-if="card.status === 2" class="card-desc">
                                            <span class="desc-title">推荐时间：</span>
                                            {{ card.solarName }}
                                        </div>
                                        <div v-if="card.status === 1" class="card-desc">
                                            <span class="desc-title">推荐时间：</span>
                                            {{ card.executeDate }}
                                        </div>
                                        <div v-if="card.status === 0" class="card-desc">
                                            <span class="desc-title">{{
                                                card.reCheck ? "复核时间：" : "执行时间："
                                            }}</span>
                                            {{ card.executeDate }}
                                        </div>
                                        <div class="card-desc last-desc">
                                            <span class="desc-title">药物处方：</span>
                                            <div class="rescription-wrap">
                                                <div class="rescription">
                                                    <span
                                                        v-for="(
                                                            fertilizer, fertilizerI
                                                        ) in card.prescriptionList"
                                                        :key="fertilizerI"
                                                    >
                                                        <span v-for="(pest, pestI) in fertilizer.pesticideFertilizerList" :key="'sub' + pestI">
                                                            {{ pest.defaultName }}
                                                            <span
                                                                v-if="
                                                                    (pestI !== fertilizer.pesticideFertilizerList.length - 1) || (fertilizerI !== card.prescriptionList.length - 1)
                                                                "
                                                            >
                                                                +
                                                            </span>
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="detail-text">查看详情></div>
                                            </div>
                                        </div>
                                        <div class="card-link">
                                            <img src="@/assets/images/warningHome/expert-icon.png" />
                                            <div class="expert-name">
                                                {{ card.expertName
                                                }}<el-icon size="12" class="icon"><ArrowRightBold /></el-icon>
                                            </div>
                                        </div>
                                    </div>
                                    <chart
                                        v-if="card.status !== 2 && card.indexChart.length"
                                        :key="cardI"
                                        :indexName="card.indexName"
                                        :type="card.status !== 1 ? 'normal' : 'feature'"
                                        :chartData="card.indexChart"
                                    ></chart>
                                </div>
                            </div>
                            <div v-if="card.status !== 2" :class="['over-img']">
                                <!-- 图片列表 -->
                                <album-carousel7d
                                    :sampleId="sampleId"
                                    :farmId="farmId"
                                    :farmWork="card"
                                ></album-carousel7d>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <detail-dailog></detail-dailog>
    </div>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted, nextTick, onActivated, onDeactivated } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import eventBus from "@/api/eventBus";
import chart from "./chart.vue";
import indicatorChart from "./indicatorChart.vue";
const store = useStore();
import AlbumCarousel7d from "./album_compoents/albumCarousel7d";
import detailDailog from "./album_compoents/detailDailog";
import { SET_TOKEN } from "@/store/modules/app/type";

const route = useRoute();
// 监听页面滚动，更新当前激活的锚点
const handleScroll = () => {
    const scrollPosition = window.scrollY; // 加上头部偏移量
    farmWorkList.value.forEach((_, index) => {
        const section = document.getElementById(`section${index}`);
        if (section && section.offsetTop <= scrollPosition) {
            activeSection.value = index;
        }
    });
};

const handleRightScroll = () => {
    activeSection.value = null;
};

// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function (...args) {
        const later = () => {
            clearTimeout(timeout);
            func.apply(this, args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

const debouncedHandleScroll = debounce(handleScroll, 100);
const debouncedHandleScroll2 = debounce(handleRightScroll, 500);
// onMounted(() => {
//     window.addEventListener("scroll", debouncedHandleScroll);
//     // myPushChart = echarts.init(chartPushRef.value);
//     // myPushChart.setOption(galleryLine);

//     getFarmDetail(farmId);
//     getFarmWorkList(farmId);
// });

const sampleId = ref(route.query.sampleId);
const farmId = ref(route.query.farmId);
const indicatorChartData = ref({
    content: "\n从化的荔博园\n    该果园荔枝处于花芽萌动期，估算当前约为1.0，综合生长异常风险为0.0%，病虫风险为0.33%。\n    （目前没有无人机飞巡监测，结果根据气象与地形条件与周边飞巡点推断获得。）\n\n",
    dates: [
        "2024-12-31",
        "2025-01-01",
        "2025-01-02",
        "2025-01-03",
        "2025-01-04",
        "2025-01-05",
        "2025-01-06",
        "2025-01-07",
        "2025-01-08",
        "2025-01-09",
        "2025-01-10",
        "2025-01-11",
        "2025-01-12",
        "2025-01-13",
    ],
    disease_risk: [15, 7, 12, 3, 18, 9, 14, 6, 11, 4, 0.33, 0.33, 0.33, 19],
    disease_risk_name: "病虫异常",
    growth_risk: [8, 16, 2, 10, 5, 17, 13, 1, 20, 7, 12, 3, 18, 9],
    growth_risk_name: "生长异常",
    pheno_param1: [1.0, 1.0, 1.0, 1.0, 1.0, 14, 6, 11, 4, 19, 15, 7, 12, 3],
    pheno_param1_name: "褪绿率",
    pheno_param2: [18, 9, 14, 6, 11, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0],
    pheno_param2_name: "花芽率",
    pheno_param3: [5, 17, 13, 1, 20, 7, 12, 3, 18, 9, 14, 6, 11, 4],
    pheno_param3_name: "花蕾率",
});
onMounted(() => {
    sampleId.value = 766;
    farmId.value = 88388;

    eventBus.on("MockFarmLayer:click", ({ sampleIdVal, farmIdVal }) => {
        sampleId.value = sampleIdVal;
        farmId.value = farmIdVal;
        getFarmDetail(farmId.value);
        getFarmWorkList(farmId.value);
    });
    getFarmDetail(farmId.value);
    getFarmWorkList(farmId.value);
    window.addEventListener("scroll", debouncedHandleScroll);
});
// onActivated(() => {
//     sampleId.value = route.query.sampleId;
//     farmId.value = route.query.farmId;
//     window.addEventListener("scroll", debouncedHandleScroll);
//     getFarmDetail(farmId.value);
//     getFarmWorkList(farmId.value);
// });
// onDeactivated(() => {
//     farmDetail.value = {};
//     farmWorkList.value = [];
//     window.removeEventListener("scroll", debouncedHandleScroll);
// });

// 移除滚动事件监听
onUnmounted(() => {
    window.removeEventListener("scroll", debouncedHandleScroll);
});


// 农场详情
const farmDetail = ref({});
const getFarmDetail = async (id) => {
    VE_API.mini_farm.fetchFarmDetail({ id }).then(({ data }) => {
        farmDetail.value = data;
    });
};

// 农事列表
const farmWorkList = ref([]);
const getFarmWorkList = (farmId) => {
    VE_API.mini_farm.fetchFarmWorkList({ farmId }).then(({ data }) => {
        getSecondLastIndex(data);
        // farmWorkList.value = data;
        nextTick(() => {
            initScrollToSection(secondLastIndex.value);
        });
        setTimeout(() => {
            startFlashing();
        }, 100);
    });
};

const activeSection = ref(0);

const scrollContainer = ref(null);
// 点击左侧菜单项，滚动到对应内容
const scrollToSection = (index) => {
    //   const section = farmWorkList.value[index];
    const sectionElement = document.getElementById(`section${index}`);
    if (sectionElement) {
        sectionElement.scrollIntoView({ behavior: "smooth" });
        activeSection.value = index;
        setTimeout(() => {
            // 获取滚动容器的当前滚动位置
            let scrollTop = scrollContainer.value.scrollTop;
            scrollTop += 44; // 加多 44px，头部的高度
            // 滚动至目标位置
            scrollContainer.value.scrollTop = scrollTop;
        }, 300);
    }
};

// 点击左侧菜单项，滚动到对应内容
const initScrollToSection = (index) => {
    const menuElement = document.getElementById(`menu${index}`);
    if (menuElement) {
        menuElement.scrollIntoView({ behavior: "smooth" });
        activeSection.value = index;
        setTimeout(() => {
            scrollToSection(index);
        }, 0);
    }
};
const secondLastIndex = ref(-1); // 初始化索引值
const getSecondLastIndex = (data) => {
    // 过滤出 status 为 2 的项
    const filteredItems = data.filter((item) => item.status === 1);
    // 获取倒数第二项
    if (filteredItems.length >= 1) {
        const secondLastItem = filteredItems[filteredItems.length - 1];
        // 获取该项在原数组中的索引
        secondLastIndex.value = data.indexOf(secondLastItem);

        const lastTwoItems = filteredItems.slice(-1);
        farmWorkList.value = data.map((item) => {
            // 如果是最后两项之一，则添加 feature 属性
            if (lastTwoItems.includes(item)) {
                return { ...item, hasBg: true };
            }
            return item;
        });
    } else {
        secondLastIndex.value = -1; // 如果没有足够的项，设置为 -1
    }
};

const isFlashing = ref(false);
const startFlashing = () => {
    isFlashing.value = true;

    // 使用 setTimeout 在一段时间后停止闪动
    setTimeout(() => {
        isFlashing.value = false;
    }, 3000); // 3 秒后停止闪动
};

// 显示详情
const showDetail = (card) => {
    const pageParams = {
        activeIndex: activeSection.value,
        card,
    };
    eventBus.emit("detailDialog:showDialog", pageParams);
};
</script>

<style lang="scss" scoped>
.album-page {
    position: relative;
    width: 100%;
    height: calc(100% - 30px);
    overflow: hidden;
    margin-top: 34px;
    background: #232323;
    border: 1px solid #666666;
    border-radius: 4px;

    .album-wrap {
        width: 100%;
        height: 100%;
        .barrage-title {
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4);
            width: 100%;
            position: sticky;
            background: #232323;
            top: 0;
            left: 0;
            z-index: 9;
            .title-icon {
                cursor: pointer;
                position: absolute;
                left: 16px;
                top: 13px;
            }
        }
        .album-content {
            height: calc(100% - 44px);
            // overflow: auto;
            // margin-top: 45px;
            .album-top {
                display: flex;
                padding: 12px 10px 16px 10px;
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
                .album-img {
                    img {
                        width: 78px;
                        height: 78px;
                        object-fit: cover;
                        border-radius: 6px;
                    }
                }
                .garden-content {
                    padding-left: 12px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .garden-name {
                        font-weight: bold;
                        font-size: 16px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .tag-wrap {
                            display: flex;
                            flex-wrap: wrap;
                            flex: 1;
                            margin-left: 6px;
                        }
                        .type-tag {
                            margin-top: 2px;
                            font-weight: normal;
                            margin-left: 4px;
                            padding: 0 6px;
                            height: 21px;
                            line-height: 21px;
                            border-radius: 2px;
                            border: 0.5px solid #ffd489;
                            font-size: 12px;
                            color: #ffd489;
                        }
                    }
                    .garden-desc {
                        padding-top: 4px;
                        font-size: 13px;
                        color: #9f9f9f;
                    }
                }
            }
            .album-camera {
                width: 100%;
                padding: 0 10px 10px;
                box-sizing: border-box;
                position: relative;
                .tips-text {
                    position: absolute;
                    left: calc(50% + 20px);
                    top: 8px;
                    height: 17px;
                    padding: 1px 5px 2px 8px;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 24px 20px 20px 0;
                    line-height: 18px;
                    background: linear-gradient(45deg, #00d4ff, #008eff);
                }
                img {
                    width: 100%;
                }
            }
            .album-bottom {
                display: flex;
                // height: calc(100% - 106px);
                position: relative;
                background: rgba(73, 73, 73, 0.3);
                height: calc(100% - 105px);
                overflow: hidden;

                .export-btn {
                    position: fixed;
                    z-index: 999;
                    left: 0;
                    bottom: 0px;
                    height: 60px;
                    padding-top: 10px;
                    background: rgba(73, 73, 73, 0.3);
                    .btn-item {
                        font-size: 14px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: linear-gradient(45deg, #00d4ff, #008eff);
                        width: 98px;
                        height: 36px;
                    }
                    img {
                        width: 24px;
                    }
                }
                .album-l {
                    width: 98px;
                    // height: calc(100vh - 114px);
                    height: 100%;
                    overflow: auto;
                    background: rgba(73, 73, 73, 0.3);
                    border-radius: 0 4px 4px 0;
                    .menu-icon {
                        width: 16px;
                        margin-right: 4px;
                    }
                    .menu-name {
                        max-width: 80px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    ::v-deep {
                        .el-menu {
                            background: rgba(73, 73, 73, 0.3);
                            border-right: 0;
                            .el-menu-item {
                                height: 32px;
                                line-height: 32px;
                                justify-content: center;
                                color: #cecece;
                                margin: 10px 0;
                                padding: 4px;
                                &:hover {
                                    background: transparent;
                                }
                                &.is-active {
                                    background: transparent;
                                    color: #cecece;
                                    .menu-name {
                                        // color: #666666;
                                    }
                                }
                                &.active {
                                    background: #232323;
                                    color: #f0ac37;
                                    .menu-name {
                                        color: #f0ac37;
                                    }
                                }
                            }
                        }
                    }
                    .noTime {
                        // color: #cccccc;
                    }
                    .now {
                        color: rgba(33, 153, 248, 1);
                    }
                    .onTime {
                        color: rgba(255, 212, 137, 0.6);
                    }
                }
                ::v-deep {
                    .el-affix {
                        background: rgba(73, 73, 73, 0.3);
                        border-radius: 0 4px 4px 0;
                        width: 98px !important;
                        height: 100%;
                        & > div {
                            height: 100%;
                        }
                    }
                }
                .album-r {
                    padding: 0 10px 34px 10px;
                    flex: 1;
                    background: #232323;
                    height: 100%;
                    overflow: auto;
                    box-sizing: border-box;
                    .common-btn {
                        background: #f7be5a;
                        border-radius: 4px;
                        color: #fff;
                        padding: 8px 10px;
                        text-align: center;
                    }
                    .card-wrap {
                        // border: 1px solid #FFDA66;
                        border-radius: 8px;
                        // padding: 8px 8px;
                        position: relative;
                        z-index: 2;
                        // margin-top: -20px;
                        &.noCarousel {
                            padding: 0;
                            // margin-top: 12px;
                            // padding-top: 10px;
                            border: none;
                            .card-top .card-link {
                                top: 24px;
                            }
                        }
                    }
                    .card-content {
                        background: rgba(105, 73, 13, 0.1);
                        border-radius: 8px;
                        padding: 0 8px 8px;
                        border: 1px solid #ffda66;
                        &.push {
                            padding: 0 8px 12px 8px;
                            // margin-bottom: 8px;
                            // border: 1px solid rgba(102, 102, 102, 0.38);
                        }
                        &.hasBg {
                            padding: 0 8px 12px 8px;
                            background: #232323;
                            border: 1px solid rgba(102, 102, 102, 0.38);
                            .card-top {
                                border-bottom: none;
                                padding-bottom: 0;
                            }
                        }
                        .card-top {
                            cursor: pointer;
                            padding-bottom: 12px;
                            border-bottom: 1px solid rgba(255, 238, 208, 0.4);
                            position: relative;
                            &.noChart {
                                border-bottom: 0;
                                padding-bottom: 0;
                            }
                            .card-title {
                                display: flex;
                                align-items: center;
                                padding-bottom: 8px;
                                .serve-btn {
                                    padding: 3px 10px;
                                    background: #f7be5a;
                                    border-radius: 22px;
                                    color: #fff;
                                    text-align: center;
                                }
                                .title-name {
                                    color: #fff;
                                    font-size: 16px;
                                    padding-right: 8px;
                                    font-weight: 600;
                                }
                                img {
                                    width: 24px;
                                }

                                .status-tag {
                                    color: #f3a302;
                                    font-size: 12px;
                                    padding: 2px 6px;
                                    border-radius: 2px;
                                    border: 0.2px solid transparent;
                                    &.blue {
                                        color: #f7be5a;
                                        background: rgba(33, 153, 248, 0.2);
                                    }
                                    &.good-wrap {
                                        margin-left: 4px;
                                        display: flex;
                                        align-items: center;
                                        .good {
                                            margin-left: 3px;
                                            width: 13px;
                                        }
                                    }
                                    &.standard {
                                        color: #f7be5a;
                                        border-color: #ffd489;
                                    }
                                    &.advice {
                                        color: rgba(252, 167, 3, 0.9);
                                        background: rgba(255, 220, 104, 0.38);
                                    }
                                    &.warning {
                                        color: #ff4221;
                                        background: rgba(255, 175, 160, 0.24);
                                    }
                                }
                                &.serve-title {
                                    padding: 12px 0 8px 0;
                                    display: flex;
                                    align-items: center;
                                    position: relative;
                                    .add-btn {
                                        position: absolute;
                                        right: -8px;
                                        top: 0;
                                        background: #f7be5a;
                                        color: #fff;
                                        font-size: 12px;
                                        border-radius: 0 8px 0 8px;
                                        padding: 1px 6px;
                                        &.unactive {
                                            background: #494949;
                                            color: #9f9f9f;
                                        }
                                    }
                                    .tag {
                                        display: flex;
                                        align-items: center;
                                        color: #ff7000;
                                        font-size: 10px;
                                        .desc {
                                            position: relative;
                                            left: -4px;
                                        }
                                        .photo-grid {
                                            display: flex;
                                            .photo {
                                                position: relative;
                                                img {
                                                    width: 18px; /* 示例宽度，你可以根据需要调整 */
                                                    height: 18px;
                                                    object-fit: cover;
                                                    border-radius: 50%;
                                                    display: block; /* 去除图片底部的空白间隙 */
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            .card-desc {
                                color: #9f9f9f;
                                font-size: 12px;
                                line-height: 18.2px;
                                .desc-title {
                                    color: #494949;
                                }
                                .rescription-wrap {
                                    display: flex;
                                    align-items: center;
                                    .detail-text {
                                        color: #f7be5a;
                                        padding-left: 6px;
                                    }
                                }
                                .rescription {
                                    max-width: 100px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                            .card-link {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                color: #a46700;
                                font-size: 12px;
                                position: absolute;
                                right: 6px;
                                top: 20px;
                                .expert-name {
                                    background: #ffd489;
                                    border-radius: 4px;
                                    padding: 2px 6px 3px 10px;
                                    margin-top: 4px;
                                    display: flex;
                                    align-items: center;
                                }
                                img {
                                    width: 64px;
                                }
                                .icon {
                                    padding-right: 2px;
                                }
                            }
                        }
                        .card-chart {
                            padding: 8px 4px 0 4px;
                            height: 130px;
                        }
                    }

                    .done-card {
                        margin-bottom: 14px;
                    }
                    .card-dom {
                        position: relative;
                        // top: -50px;
                    }

                    .over-img {
                        transition: all 0.2s ease-in-out;
                        position: relative;
                        z-index: 3;
                        ::v-deep {
                            img {
                                border-radius: 8px;
                            }
                        }
                    }
                    .log-wrap {
                        padding: 4px 0 10px 0;
                        .log-box {
                            // background: #fff8e0;
                            border-radius: 8px;
                            border: 0.5px solid #ffd489;
                            .log-title {
                                position: relative;
                                top: -4px;
                                background: url("@/assets/images/warningHome/log-bg.png") no-repeat top center / cover;
                                width: 74px;
                                height: 32px;
                                line-height: 26px;
                                text-align: center;
                                font-size: 14px;
                                color: #fff;
                            }
                            .log-content {
                                padding-bottom: 10px;
                                color: #ffd489;
                                .log-desc {
                                    padding: 0 10px;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
            .flashing {
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -2px;
                    width: 100%;
                    height: calc(100% - 2px);
                    border: 2px solid rgba(255, 238, 208, 0.1);
                    animation: flash 0.4s infinite alternate;
                    border-radius: 8px;
                    pointer-events: none;
                }
            }

            @keyframes flash {
                0% {
                    box-shadow: 0 0 5px #f7be5a;
                    border-color: #f7be5a;
                }
                100% {
                    box-shadow: 0 0 20px #f7be5a;
                    border: 2px solid #f7be5a;
                }
            }
        }

        .farm-icon {
            position: fixed;
            bottom: 100px;
            left: 120px;
            width: 183px;
            height: 45px;
            z-index: 10;
        }
    }
}
</style>