feiniao-farm-h5/src/views/old_mini/growth_report/index.vue

<template>
    <div class="achievement-report-page" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
        <!-- 天气遮罩 -->
        <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
        <!-- 组件：天气 -->
        <div class="weather-info-wrap">
            <weather-info ref="weatherInfoRef" from="growth_report" class="weather-info" :showTabMask="showTabMask"
                @weatherExpanded="weatherExpanded" @changeGarden="changeGarden" @changeGardenTab="changeGardenTab"
                @closeTabMask="closeTabMask">
            </weather-info>

            <!-- 邀请关注 -->
            <!-- <div class="invite-follow" v-if="currentFarmName && activeGardenTab === 'current'">
                <div class="invite-content">
                    <icon name="share" />
                    <span>邀请关注</span>
                </div>
            </div> -->
        </div>

        <!-- 农场列表 -->
        <div v-show="activeGardenTab === 'list'">
            <garden-list ref="gardenListRef" :garden-id="selectedGardenId" @loaded="handleGardenLoaded"
                @selectGarden="handleGardenSelected" />
        </div>

        <div class="report-content-wrap" v-if="hasReport && activeGardenTab === 'current'" v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.1)">
            <!-- <div class="history-risk-report-btn" @click="handleHistoryRiskReportClick">
                <span class="risk-report-icon">
                    <i></i>
                </span>
                <span class="risk-report-text">历史风险报告</span>
            </div> -->

            <div class="report-content has-report" :style="{ minHeight: `calc(100vh - ${tabBarHeight}px)` }">
                <!-- <img src="@/assets/img/home/qrcode.png" alt="" class="code-icon" /> -->
                <img class="header-img" src="@/assets/img/home/report.png" alt="" />

                <div class="report-header">
                    <!-- <div class="type-tabs report-tabs">
                        <div class="type-item" :class="{ 'type-item-active': activeReportIndex === 0 }">作物长势</div>
                        <div class="type-item" :class="{ 'type-item-active': activeReportIndex === 1 }">历史风险</div>
                        <div class="type-item" :class="{ 'type-item-active': activeReportIndex === 2 }">土壤改良</div>
                        <div class="type-item" :class="{ 'type-item-active': activeReportIndex === 3 }">种植建议</div>
                    </div> -->
                    <div class="type-tabs" v-if="subjectData.length > 1">
                        <div
                            @click="handleTypeTabClick(item, index)"
                            class="type-item"
                            v-for="(item, index) in visibleSubjectData"
                            :class="{ 'type-item-active': activeSubjectIndex === index }"
                            :key="index">{{ item.speciesName }}</div>
                    <div
                        v-if="showSubjectToggle"
                        class="subject-toggle"
                        @click="typeTabsExpanded = !typeTabsExpanded"
                    >
                        {{ typeTabsExpanded ? "点击收起" : "点击展开更多" }}
                    </div>
                    </div>

                    <div class="time-tag">{{ workItems?.[0]?.reportDate || new Date().toISOString().split('T')[0] }}</div>
                    <div class="report-title">荔枝长势报告</div>
                    <div class="report-info">
                        <div class="info-item">
                            <img class="info-icon" src="@/assets/img/home/farm.png" alt="" />
                            <span class="info-text">{{ currentFarmName }}</span>
                        </div>
                    </div>
                </div>

                <div class="report-box">
                    <div class="box-title">气象风险</div>
                    <div class="box-text">
                        <div class="box-bg">
                            <!-- <div class="types-info">
                                当前 <span class="text-bold">水稻</span> 处于为  分蘖初期<span class="text-link" @click="handleAdjustPopup">（校准物候期）</span>
                            </div> -->
                            <div class="types-info">
                                当前 <span class="text-bold">荔枝</span> 处于膨果期
                            </div>
                            <div class="tp-img">
                                <img src="@/assets/img/common/tp-1.png" alt="">
                                <img src="@/assets/img/common/tp-2.png" alt="">
                                <img src="@/assets/img/common/tp-3.png" alt="">
                                <img src="@/assets/img/common/tp-4.png" alt="">
                                <img src="@/assets/img/common/tp-5.png" alt="">
                                <img src="@/assets/img/common/tp-6.png" alt="">
                            </div>
                        </div>
                        <div class="warning-part">
                            <div class="warning-title">
                                <div class="title-l">
                                    <div class="title-line"></div>
                                    <div class="title-block"></div>
                                </div>
                                <div>未来7-15天气象风险</div>
                                <div class="title-l">
                                    <div class="title-block"></div>
                                    <div class="title-line title-line-right"></div>
                                </div>
                            </div>

                            <div class="report-part" v-for="(part, partI) in riskList" :key="partI">
                                <div class="part-title">{{ part.title }}</div>
                                <div class="part-text">{{ part.description }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="report-box">
                    <div class="box-title">农事建议</div>
                    <div class="box-text">
                        <div class="warning-part" v-for="(part, partI) in adviceList" :key="partI">
                            <div class="report-part">
                                <div class="part-top">
                                    <div class="part-title">{{ part.title }}</div>
                                    <!-- <div class="part-link">
                                        <el-icon class="part-link-icon"><Link /></el-icon>
                                        <div class="text-link">查看农事</div>
                                    </div> -->
                                </div>
                                <div class="part-text">{{ part.description }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="report-box">
                    <div class="box-title">巡园重点</div>
                    <div class="box-text">
                        <div class="warning-part" v-for="(part, partI) in patrolList" :key="partI">
                            <div class="report-part">
                                <div class="part-top">
                                    <div class="part-title">{{ part.title }}</div>
                                    <!-- <div class="part-link">
                                        <el-icon class="part-link-icon"><Link /></el-icon>
                                        <div class="text-link">查看互动</div>
                                    </div> -->
                                </div>
                                <div class="part-text">{{ part.description }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="report-box" v-for="(work, workI) in workItems" :key="workI">
                    <div class="box-title">{{ work?.title }}</div>
                    <div class="box-text">
                        <div class="box-bg" v-show="work?.backgroundDesc">
                            <span class="box-subtitle">背景描述：</span>
                            <div class="pre-text">{{ work?.backgroundDesc }}</div>
                        </div>
                        <div class="box-advice" v-show="work?.suggestion">
                            <span class="box-subtitle">对策建议：</span>
                            <div class="pre-text">{{ work?.suggestion }}</div>
                        </div>
                        <div class="box-sum pre-text" v-show="work?.summary">{{ work?.summary }}</div>
                    </div>
                </div>
            </div>

            <!-- <swipe ref="swipeRef" class="my-swipe" :loop="false" indicator-color="white" @change="handleSwipeChange">
                <swipe-item v-for="(item, index) in regionsData" :key="index">
                    
                </swipe-item>
            </swipe> -->
        </div>

        <div v-else-if="activeGardenTab === 'current'" class="fake-report-wrap report-content-wrap">
            <div class="report-content">

                <img class="header-img" src="@/assets/img/home/report.png" alt="" />
                <div class="report-header" :class="{ 'no-farm': !currentFarmName }">
                    <!-- <img class="header-book" src="@/assets/img/home/book.png" alt="" /> -->
                    <div class="time-tag">{{ new Date().toISOString().split('T')[0] }}</div>
                    <div class="report-title" @click="handleAddFarm">作物长势报告</div>
                    <div class="report-info pb-4">
                        <div class="info-item">
                            <img class="info-icon" src="@/assets/img/home/farm.png" alt="" />
                            <span class="info-text">示范农场</span>
                        </div>
                    </div>
                </div>
                <div class="fake-img">
                    <img src="@/assets/img/home/fake.png" alt="" class="fake-img-item" />
                </div>

                <div class="lock-img">
                    <img @click="handleLockClick" src="@/assets/img/home/lock-blue.png" alt=""
                        class="has-click lock-img-item" />
                    <div class="lock-text">
                        专属数字农场，种好卖好
                        <div>点击解锁一键溯源增产</div>
                    </div>

                    <div @click="handleLockClick" class="lock-btn has-click">点击解锁</div>
                </div>

                <div class="lock-bg"></div>
            </div>
        </div>

        <!-- 农场列表引导 -->
        <div class="mask-wrap" @click="closeTabMask" v-if="showTabMask"></div>

        <tip-popup v-model:show="showBindSuccess" type="success" text="您的农场已绑定成功" hideBtn />

        <start-interact-popup ref="startInteractPopupRef" />

        <agri-execute-popup ref="agriExecutePopupRef" />

        <!-- 校准物候期 -->
        <adjust-popup ref="adjustPopupRef" />
    </div>
</template>

<script setup>
import wx from "weixin-js-sdk";
import weatherInfo from "@/components/weatherInfo.vue";
import { ref, onActivated, onDeactivated, onUnmounted, computed, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Swipe, SwipeItem, Badge, Icon } from 'vant';
import tipPopup from "@/components/popup/tipPopup.vue";
import startInteractPopup from "@/components/popup/startInteractPopup.vue";
import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
import gardenList from "@/components/gardenList.vue";
import adjustPopup from "./adjustPopup.vue";

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const hasReport = ref(true);
const workItems = ref([]);
const swipeRef = ref(null);

//
const riskList = ref([
    {
        title: '病虫风险',
        description: '当前膨果期对病虫害高度敏感，易受害。经过飞鸟智慧大脑计算病虫风险:病虫胁迫指数处于中等水平，存在一定的病虫害发生风险，局部区域可能出现病害流行或虫害爆发，需加强监测预警，及时巡园'
    },
    {
        title: '阴雨寡照风险',
        description: '经过飞鸟智慧大脑计气象风险:阴雨寡照胁迫指数处于中等水平，存在一定的植株缺素风险，局部区域可能会出现长势异常现象，需加强监测预警，及时巡园'
    },
]);

const adviceList = ref([
    {
        title: '根外追肥',
        description: '荔枝膨果期遇持续阴雨寡照，需及时排水防渍，重点根外喷施磷酸二氢钾并配合补充钙硼肥，以快速恢复树势、促进膨果壮果。'
    },
    {
        title: '虫害防治',
        description: '通过叶面喷施针对性杀虫剂，快速压低蒂蛀虫种群数量，保护果实免受蛀害。'
    },
]);

const patrolList = ref([
    {
        title: '进程互动',
        description: '是否有60%的荔枝进入果实转色期？'
    },
    {
        title: '长势互动',
        description: '是是否有10%的荔枝出现生理落果或裂果症状'
    },
    {
        title: '病虫互动',
        description: '是否有10%的荔枝发现蒂蛀虫为害特征？'
    },
]);
//
const paramsPage = ref({});
const showBindSuccess = ref(false);
const startInteractPopupRef = ref(null);
const agriExecutePopupRef = ref(null);
const adjustPopupRef = ref(null);

const handleAdjustPopup = () => {
    adjustPopupRef.value.open();
}
// 天气组件相关
const isExpanded = ref(false);
const weatherInfoRef = ref(null);

const showTabMask = ref(false);
const TAB_GUIDE_SHOWN_KEY = "GROWTH_REPORT_TAB_GUIDE_SHOWN";
const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
};

// 点击遮罩时收起天气
const handleMaskClick = () => {
    if (weatherInfoRef.value && weatherInfoRef.value.toggleExpand) {
        weatherInfoRef.value.toggleExpand();
    }
};

const currentFarmName = ref('');
const selectedGardenId = ref(null);
const gardenListRef = ref(null);
const activeGardenTab = ref('current');
const changeGardenTab = (tab) => {
    activeGardenTab.value = tab;
}

const handleGardenLoaded = ({ hasFarm }) => {
    weatherInfoRef.value?.setGardenLoaded?.(hasFarm);
};

const handleGardenSelected = (garden) => {
    selectedGardenId.value = garden?.id ?? null;
    weatherInfoRef.value?.setSelectedGarden?.(garden);
};

// 切换农场时，更新报告数据
const changeGarden = async ({ id, name }) => {
    if (!id) return;
    currentFarmName.value = name;
    if (sessionStorage.getItem('activeSwipeIndex')) {
        currentIndex.value = Number(sessionStorage.getItem('activeSwipeIndex'));
    } else {
        currentIndex.value = 0;
        swipeRef.value && swipeRef.value.swipeTo(0, { immediate: true });
    }
    paramsPage.value = {
        ...(paramsPage.value || {}),
        subjectId: id,
    };
    // 初始化品种/大物候期转换
    startInteractPopupRef.value.getPhenologyInitOrConfirmStatus();
    await getSubjectData(id);
    hasReport.value = true;
    // await getRegions();
};

onActivated(() => {
    window.scrollTo(0, 0);
    // 从新增农场页返回时，优先用缓存中的最新选中农场
    const savedFarmId = localStorage.getItem("selectedFarmId");
    selectedGardenId.value = savedFarmId ? Number(savedFarmId) : null;
    gardenListRef.value?.refreshFarmList?.();

    // 如果路由中带有 miniJson，并且其中有 showBind，则展示绑定成功弹窗
    const { miniJson } = route.query || {};
    if (miniJson) {
        try {
            const parsed = typeof miniJson === "string" ? JSON.parse(miniJson) : miniJson;
            if (parsed && parsed.showBind) {
                showBindSuccess.value = true;
                // 处理完后清空路由中的 miniJson 参数，避免重复弹出
                const newQuery = { ...(route.query || {}) };
                delete newQuery.miniJson;
                router.replace({ path: route.path, query: newQuery });
            }
        } catch (e) {
            // miniJson 解析失败时忽略，不影响正常流程
        }
    }
    // getResultReport();
});

const closeTabMask = () => {
    showTabMask.value = false;
};

const userInfo = localStorage.getItem("localUserInfo");
const userInfoObj = userInfo ? JSON.parse(userInfo) : {};

const handleLockClick = () => {
    if (currentFarmName.value) {
        // router.push("/interaction?subjectId=" + localStorage.getItem("selectedFarmId"));
        router.push(`/create_farm?from=growth_report&isReload=true`);
        return;
    }
    if (userInfoObj?.tel) {
        router.push(`/create_farm?from=growth_report&isReload=true`);
        return;
    }
    wx.miniProgram.navigateTo({
        url: '/pages/subPages/phone_auth/index',
    });
}

const handleAddFarm = () => {
    router.push(`/create_farm?from=growth_report&isReload=true`);
}

const handleHistoryRiskReportClick = () => {
    router.push("/history_risk_report");
}

const todayPatrolFocus = ref([]);
const pendingFarmWork = ref([]);
const handlePendingFarmWorkClick = (card) => {
    router.push({
        path: "/work_detail",
        query: {
            miniJson: JSON.stringify({
                paramsPage: JSON.stringify({
                    farmId: paramsPage.value.farmId,
                    farmWorkLibId: card?.farmWorkLibId,
                    recordId: card?.recordId,
                    typeId: regionsData.value[currentIndex.value].typeId
                }),
            }),
        },
    });
}
// 点击今日巡园重点
const handleTodayPatrolFocusClick = (card) => {
    if (!card.interactionTypeId) return;
    router.push(`/interaction_list?farmId=${paramsPage.value.farmId}&regionId=${paramsPage.value.regionId}&interactionTypeId=${card.interactionTypeId}`);
}

const getTodayPatrolFocus = () => {
    VE_API.report.todayPatrolFocus({ farmId: paramsPage.value.farmId }).then(({ data }) => {
        todayPatrolFocus.value = data || [];
    });
}

const getPendingFarmWork = () => {
    VE_API.report.pendingFarmWork({ farmId: paramsPage.value.farmId, regionId: paramsPage.value.regionId }).then(({ data }) => {
        pendingFarmWork.value = data || [];
    });
}

const currentIndex = ref(0);
const handleSwipeChange = (index) => {
    currentIndex.value = index;
    if (paramsPage.value.regionId !== regionsData.value[index].regionId) {
        paramsPage.value = {
            ...(paramsPage.value || {}),
            farmId: regionsData.value[index].farmId,
            regionId: regionsData.value[index].regionId,
        };
        getTodayPatrolFocus();
        getPendingFarmWork();
        getDetail();
    }
}

const getDetail = () => {
    if (!paramsPage.value.farmId) return;
    loading.value = true;
    VE_API.report
        .reproductiveReport({ farmId: paramsPage.value.farmId, regionId: paramsPage.value.regionId })
        .then(({ data }) => {
            workItems.value = data || [];
        })
        .finally(() => {
            loading.value = false;
        });
};

const subjectData = ref([])
const typeTabsExpanded = ref(false);
const visibleSubjectData = computed(() => {
    if (typeTabsExpanded.value) {
        return subjectData.value;
    }
    return subjectData.value.slice(0, 4);
});
const showSubjectToggle = computed(() => subjectData.value.length > 4);

const getSubjectData = async (id) => {
    const res = await VE_API.monitor.listFarmsBySubjectId({ subjectId: id });
    // subjectData.value = res.data || [];
    subjectData.value = [...res.data, ...res.data, ...res.data, ...res.data];
    typeTabsExpanded.value = false;
}

const activeReportIndex = ref(0);
const activeSubjectIndex = ref(0);
const handleTypeTabClick = (item, index) => {
    activeSubjectIndex.value = index;
    paramsPage.value = {
            ...(paramsPage.value || {}),
            farmId: item.farmId,
    };
    getTodayPatrolFocus();
}

const regionsData = ref([]);
const getRegions = async () => {
    VE_API.monitor.listRegionsBySubjectId({
        subjectId: paramsPage.value.subjectId,
    }).then(({ data }) => {
        console.log(data);
        regionsData.value = data || [];
        if (regionsData.value.length > 0) {
            hasReport.value = true;
            const hasShownTabGuide = localStorage.getItem(TAB_GUIDE_SHOWN_KEY) === "1";

            // 首次进入且有分区数据：显示农场列表引导
            if (!hasShownTabGuide) {
                showTabMask.value = true;
                localStorage.setItem(TAB_GUIDE_SHOWN_KEY, "1");
            } else {
                showTabMask.value = false;
            }

            // 切换农场tab回到当前农场tab
            weatherInfoRef.value && weatherInfoRef.value.handleGardenClick('current');

            // 如果不是点击农情报告已生成弹窗过来的，则显示农情互动弹窗
            if (!route.query.hideInteraction) {
                agriExecutePopupRef.value.showPopup(regionsData.value[currentIndex.value].farmId);
            }

            paramsPage.value = {
                ...(paramsPage.value || {}),
                farmId: regionsData.value[currentIndex.value].farmId,
                regionId: regionsData.value[currentIndex.value].regionId,
            };
            getTodayPatrolFocus();
            getPendingFarmWork();
            getDetail();
            // 如果是新增品种后跳转过来的，等待 Swipe 实例挂载后再定位
            if (route.query.addVarietyCount) {
                const targetIndex = Number(route.query.addVarietyCount);
                if (!Number.isNaN(targetIndex) && targetIndex >= 0) {
                    const safeIndex = Math.min(targetIndex, regionsData.value.length - 1);
                    const reverseIndex = Math.min(
                        regionsData.value.length - 1,
                        Math.max(0, regionsData.value.length - safeIndex)
                    );
                    nextTick(() => {
                        swipeRef.value?.swipeTo?.(reverseIndex, { immediate: true });
                    });
                }
            }

            if (sessionStorage.getItem('activeSwipeIndex')) {
                nextTick(() => {
                    swipeRef.value?.swipeTo?.(currentIndex.value, { immediate: true });
                });
                sessionStorage.removeItem('activeSwipeIndex');
            }
        } else {
            // 切换农场tab回到当前农场tab
            // weatherInfoRef.value && weatherInfoRef.value.handleGardenClick('current');
            showTabMask.value = false;
            hasReport.value = false;
        }
    });
}

// 清理数据的函数
const clearData = () => {
    workItems.value = [];
    paramsPage.value = {};
    loading.value = false;
};

onDeactivated(() => {
    sessionStorage.setItem('activeSwipeIndex', currentIndex.value);
    clearData();
});

onUnmounted(() => {
    clearData();
});
</script>

<style lang="scss" scoped>
.mask-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.52);
    z-index: 99999;
}

.achievement-report-page {
    width: 100%;
    height: 100vh;
    background: linear-gradient(195.35deg, #d4e4ff 16.34%, rgba(93, 189, 255, 0) 50.3%),
        linear-gradient(156.64deg, rgba(255, 255, 255, 0.16) 27.7%, rgba(255, 255, 255, 0) 72.82%);

    .weather-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.52);
        z-index: 11;
    }

    .weather-info-wrap {
        width: calc(100% - 20px);
        position: absolute;
        z-index: 12;
        left: 10px;
        top: 10px;

        .weather-info {
            width: 100%;
        }

        .invite-follow {
            position: absolute;
            right: -6px;
            top: 50px;

            .invite-content {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 14px;
                font-family: "PangMenZhengDao";
                color: #fff;
                line-height: 30px;
                padding: 0 12px;
                border-radius: 20px 0 0 20px;
                height: 30px;
                cursor: pointer;
                background: #2199F8;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: -6px;
                    right: 0;
                    width: 0px;
                    height: 0px;
                    border-right: 3px solid transparent;
                    border-top: 3px solid #75a8cd;
                    border-left: 3px solid #75a8cd;
                    border-bottom: 3px solid transparent;
                }
            }
        }
    }


    .fake-report-wrap {
        width: 100%;

        .no-report-img {
            width: 100%;
        }

        .fake-img {
            position: relative;

            .fake-img-item {
                width: 100%;
            }
        }
    }

    .report-content-wrap {
        height: 100%;
        // padding-bottom: 60px;
        overflow: auto;
        box-sizing: border-box;
        position: relative;

        .history-risk-report-btn {
            position: absolute;
            right: 0px;
            top: 110px;
            z-index: 13;
            height: 26px;
            padding: 0 10px 0 8px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #ffffff;
            font-size: 14px;
            border-radius: 13px 0 0 13px;
            background: linear-gradient(180deg, #60c2ff 0%, #2199f8 100%);
            box-shadow: 0 2px 6px rgba(33, 153, 248, 0.3);
            cursor: pointer;

            .risk-report-icon {
                width: 14px;
                height: 14px;
                border-radius: 2px;
                background: #ffffff;
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transform: rotate(-12deg);

                i {
                    width: 8px;
                    height: 2px;
                    border-radius: 2px;
                    background: #42a7ff;
                    box-shadow: 0 3px 0 #42a7ff;
                }
            }

            .risk-report-text {
                line-height: 1;
                white-space: nowrap;
            }
        }

        .bottom-btn {
            z-index: 2;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
            box-sizing: border-box;
            box-shadow: 2px 2px 4.5px 0px rgba(0, 0, 0, 0.4);

            .btn-item {
                height: 40px;
                line-height: 40px;
                padding: 0 24px;
                border-radius: 20px;
                font-size: 14px;

                &.second {
                    color: #666666;
                    border: 1px solid rgba(153, 153, 153, 0.5);
                }

                &.primay {
                    padding: 0 34px;
                    background: linear-gradient(180deg, #76c3ff, #2199f8);
                    color: #fff;
                }
            }
        }
    }

    .code-icon {
        position: absolute;
        right: 10px;
        top: 12px;
        width: 48px;
    }

    .report-content {
        // background: url("@/assets/img/home/report_bg.png") no-repeat center center;
        // background: linear-gradient(0deg, #9BCCFF, #9BCCFF),
        //     linear-gradient(160deg, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0) 72%);
        background: #abd4ff;

        background-size: 100% auto;
        background-position: top center;
        padding: 0 10px 26px 10px;
        box-sizing: border-box;
        position: relative;

        &.has-report {
            min-height: 100%;
            background: linear-gradient(0deg, #9BCCFF, #9BCCFF),
                linear-gradient(156.64deg, rgba(255, 255, 255, 0.16) 27.7%, rgba(255, 255, 255, 0) 72.82%);
        }

        .lock-bg {
            position: absolute;
            top: 230px;
            left: 0;
            width: 100%;
            height: calc(100% - 230px);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 100%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
        }

        .lock-img {
            pointer-events: none;
            position: fixed;
            z-index: 10;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -20%);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;

            .lock-img-item {
                width: 57px;
            }

            .has-click {
                pointer-events: auto;
            }

            .lock-text {
                font-size: 14px;
                color: #000;
                padding: 5px 64px;
                line-height: 21px;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
            }

            .lock-btn {
                width: 140px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: linear-gradient(180deg, #76C3FF 0%, #2199F8 100%);
                border-radius: 25px;
                color: #fff;
                font-size: 16px;
            }
        }

        .header-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .type-tabs {
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            width: fit-content;
            border-radius: 5px;
            padding: 5px;
            margin-bottom: 22px;
            &.report-tabs {
                padding: 0 5px;
                height: 38px;
                background: none;
                margin-bottom: 6px;
                .type-item {
                    height: 34px;
                    line-height: 34px;
                    font-size: 14px;
                    color: #858585;
                }
            }
            .type-item {
                height: 28px;
                line-height: 28px;
                text-align: center;
                padding: 0 6px;
                min-width: 80px;
                color: #9A9A9A;
                background: #FFFFFF;
                box-sizing: border-box;
                border-radius: 2px;
                &.type-item-active {
                    background: #2199F8;
                    color: #fff;
                }
            }
        }

        .subject-toggle {
            margin-top: 4px;
            margin-bottom: 5px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            width: 100%;
            cursor: pointer;
            text-align: center;
        }

        .report-header {
            position: relative;
            padding-top: 148px;

            &.no-farm {
                padding-top: 102px;
            }

            .header-book {
                position: absolute;
                right: 0;
                bottom: -6px;
                height: 88px;
                z-index: 10;
            }

            .time-tag {
                background: #2199F8;
                border-radius: 5px 0 5px 0;
                height: 23px;
                line-height: 23px;
                font-size: 13px;
                font-weight: 500;
                color: #fff;
                padding: 0 9px;
                width: fit-content;
                margin-bottom: 4px;
            }

            .report-title {
                font-family: "PangMenZhengDao";
                font-size: 34px;
                line-height: 38px;
                color: #000000;
            }

            .report-info {
                padding: 12px 0 28px 0;

                &.pb-4 {
                    padding-bottom: 4px;
                }

                .info-item {
                    width: fit-content;
                    display: flex;
                    height: 33px;
                    align-items: center;
                    padding: 0 18px 0 6px;
                    background: rgba(255, 255, 255, 0.58);
                    backdrop-filter: blur(5px);
                    border-radius: 20px;
                    gap: 6px;

                    .info-icon {
                        width: 26px;
                        height: 26px;
                        object-fit: cover;
                        border-radius: 50%;
                    }

                    .info-text {
                        font-size: 14px;
                        color: #000;
                    }
                }

                .info-item+.info-item {
                    margin-top: 5px;
                }
            }

            // 左滑查看更多标签
            .swipe-more-tag {
                position: absolute;
                bottom: 10px;
                right: -16px;
                box-sizing: border-box;
                width: 36px;
                height: 86px;
                // padding: 0px 10px 2px 0;
                background: rgba(0, 0, 0, 0.7);
                border-radius: 10px 0 0 10px;
                letter-spacing: 2px;
                color: #ffffff;
                font-size: 12px;
                text-align: center;
                line-height: 14px;
                writing-mode: vertical-rl;
                text-orientation: mixed;
                padding-right: 5px;
            }
        }

        .report-box {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            // background: linear-gradient(0deg, #ffffff 86%, #2199f8 136%);
            background: #fff;
            border: 1px solid #ffffff;
            border-radius: 8px;
            gap: 5px;
            position: relative;
            &.warning-bg {
                background: linear-gradient(0deg, #FFFFFF 86%, #FF9B48 136%);
            }

            .report-box-item {
                flex: 1;
                background: rgba(33, 153, 248, 0.1);
                border-radius: 8px;
                min-height: 62px;
                box-sizing: border-box;
                padding: 2px 4px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .item-content {
                    color: #2199f8;
                    font-size: 14px;
                    text-align: center;
                }

                .item-title {
                    color: #000000;
                    font-size: 10px;
                    text-align: center;
                    padding-top: 5px;
                }
            }

            .box-title {
                position: absolute;
                top: -8px;
                left: -1px;
                height: 32px;
                line-height: 26px;
                font-family: "PangMenZhengDao";
                font-size: 14px;
                padding: 0 10px;
                color: #ffffff;
                background: url("@/assets/img/home/title-bg.png") no-repeat center center / 100% 100%;

                &.warning {
                    background: url("@/assets/img/home/title-bg-warning.png") no-repeat center center / 100% 100%;
                }
            }

            .w-100 {
                width: 100%;
            }

            .box-text {
                padding: 22px 0 8px 0;
                font-weight: 350;
                line-height: 21px;
                width: 100%;
                box-sizing: border-box;

                .pre-text {
                    white-space: pre-line;
                    word-break: break-word;
                }

                .box-subtitle {
                    color: #000;
                }

                .box-bg {
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.5);
                    margin-bottom: 8px;
                }

                .types-info {
                    background: rgba(33, 153, 248, 0.1);
                    color: #000000;
                    padding: 6px;
                    border-radius: 5px;
                    .text-bold {
                        font-weight: bold;
                    }
                }
                .tp-img {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 6px;
                    width: 100%;
                    margin-top: 8px;
                    box-sizing: border-box;
                    img {
                        width: 100%;
                        height: 78px;
                        object-fit: contain;
                    }
                }
                .text-link {
                    color: #2199F8;
                    text-decoration: underline;
                }

                .report-part {
                    color: rgba(0, 0, 0, 0.5);
                    .part-title {
                        background: #2199F8;
                        height: 24px;
                        line-height: 24px;
                        padding: 0 8px;
                        color: #fff;
                        border-radius: 2px;
                        width: fit-content;
                    }
                    .part-text {
                        padding-top: 6px;
                    }
                    .part-top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .part-link {
                            display: inline-flex;
                            align-items: center;
                            gap: 4px;
                            color: #2199F8;
                            .part-link-icon {
                                transform: rotate(270deg);
                            }
                        }
                    }
                }
                .warning-part + .warning-part {
                    margin-top: 8px;
                }
                .report-part + .report-part {
                    margin-top: 8px;
                }

                .warning-part {
                    background: rgba(178, 178, 178, 0.08);
                    border-radius: 5px;
                    padding: 11px 6px 6px;
                    color: rgba(0, 0, 0, 0.5);
                    width: 100%;
                    box-sizing: border-box;
                    .warning-title {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 10px;
                        padding-bottom: 13px;
                        .title-l {
                            display: flex;
                            align-items: center;
                            .title-line {
                                width: 76px;
                                height: 1px;
                                background: linear-gradient(90deg, rgba(118, 118, 118, 0) 0%, rgba(118, 118, 118, 0.4) 100%);
                                &.title-line-right {
                                    background: linear-gradient(270deg, rgba(118, 118, 118, 0) 0%, rgba(118, 118, 118, 0.4) 100%);
                                }
                            }
                            .title-block {
                                width: 6px;
                                height: 6px;
                                background: rgba(61, 61, 61, 0.2);
                                transform: rotate(45deg);
                            }
                        }
                    }
                }

                .box-advice {
                    color: rgba(0, 0, 0, 0.5);
                    padding-top: 10px;
                }

                .box-sum {
                    margin-top: 10px;
                    background: rgba(33, 153, 248, 0.1);
                    border-radius: 5px;
                    padding: 10px;
                    line-height: 20px;
                    color: #2199F8;
                }

                &.next-info {
                    padding: 8px 0 8px 0;
                }
            }

            .row {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 6px;



                .status-card {
                    border-radius: 2px;
                    padding: 7px 0;
                    background: #ffffff;
                    border: 0.5px solid #e5e6eb;
                    color: #000;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    &.today-red {
                        background: #FF6A6A;
                        color: #fff;

                        .status-sub {
                            color: #fff;
                        }
                    }

                    &.pending-card {
                        color: #fff;
                        position: relative;
                        padding: 9px 0 7px 0;

                        .tag-name {
                            position: absolute;
                            top: -8px;
                            right: 0;
                            background: #fff;
                            color: #FF6A6A;
                            font-size: 10px;
                            height: 17px;
                            line-height: 17px;
                            padding: 0 3px;
                            border-radius: 2px;
                            box-sizing: border-box;
                            border: 0.5px solid #FF6A6A;
                        }
                    }

                    .status-badge {
                        // position: absolute;
                        // top: 0;
                        // right: 0;
                    }

                    .status-title {
                        font-size: 16px;
                        line-height: 24px;

                        &.status-title-small {
                            font-size: 13px;
                            line-height: 18px;
                        }
                    }

                    .status-sub {
                        font-size: 10px;
                        color: rgba(32, 32, 32, 0.4);
                        line-height: 15px;

                        &.pending-sub {
                            color: #fff;
                            line-height: 13px;
                        }
                    }

                    &.risk-strong {
                        background: #FF6A6A;
                        border-color: #FF6A6A;

                        .status-title,
                        .status-sub {
                            color: #ffffff;
                        }
                    }

                    &.danger {
                        background: #FFE9E9;
                        border-color: #ff8e8e;

                        .status-sub {
                            color: #FF6A6A;
                        }
                    }
                }
            }
        }

        .report-box+.report-box {
            margin-top: 20px;
        }

        .report-excute {
            position: relative;
            margin-top: 12px;

            .tag-label {
                position: absolute;
                top: 0;
                left: 0;
                padding: 4px 10px;
                background: rgba(54, 52, 52, 0.8);
                color: #fff;
                font-size: 12px;
                border-radius: 8px 0 8px 0;
                z-index: 1;
            }

            ::v-deep {
                .carousel-container .carousel-wrapper .carousel-img {
                    min-width: calc(100vw - 32px);
                    width: calc(100vw - 32px);
                }
            }
        }
    }

    .download-btn {
        position: fixed;
        bottom: 20px;
        left: 50%;
        // background: #fff;
        // box-shadow: 2px 2px 4.5px 0px #00000066;
        // width: 100%;
        transform: translateX(-50%);
    }

    .review-hide-box {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        bottom: 0;
    }

    .review-image {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 12px;
        background: #fff;
        border-radius: 8px;

        .review-mask {
            z-index: 1;
            pointer-events: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            background: linear-gradient(360deg,
                    rgba(0, 0, 0, 0.78) 0%,
                    rgba(0, 0, 0, 0.437208) 19.87%,
                    rgba(0, 0, 0, 0) 33.99%);
            display: flex;
            flex-direction: column;
            align-items: baseline;
            justify-content: end;
            padding: 12px;
            box-sizing: border-box;
            color: #fff;

            .review-text {
                font-family: "PangMenZhengDao";
                font-size: 16px;
                margin-bottom: 1px;
            }

            .review-content {
                font-size: 10px;
                line-height: 15px;
            }
        }

        .vs-wrap {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            z-index: 10;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .review-image-item {
            position: relative;
            flex: 1;

            .review-image-item-title {
                position: absolute;
                top: 0;
                left: 0;
                background: rgba(54, 52, 52, 0.6);
                padding: 4px 10px;
                border-radius: 8px 0 8px 0;
                backdrop-filter: 4px;
                font-size: 12px;
                color: #fff;
            }

            // .review-image-item-img {
            //     width: 100%;
            //     height: 250px;
            //     object-fit: cover;
            // }
            .review-image-item-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            .left-img {
                border-radius: 8px 0 0 8px;
            }

            .right-img {
                border-radius: 0 8px 8px 0;
            }
        }
    }
}


.cavans-popup {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    background: none;
    border-radius: 12px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    backdrop-filter: 4px;

    .cavans-content {
        text-align: center;
        padding: 0 12px;
        height: fit-content;
        overflow: auto;

        .current-img {
            width: 100%;
        }
    }

    // 底部操作按钮
    .bottom-actions {
        flex-shrink: 0;

        .action-buttons {
            padding: 12px 0 4px 0;
            display: flex;
            justify-content: space-around;

            .action-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                cursor: pointer;

                &.text-btn {
                    font-size: 12px;
                    color: rgba(255, 255, 255, 0.7);
                }

                .icon-circle {
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    margin-bottom: 4px;

                    .el-icon {
                        color: #fff;
                    }

                    img {
                        width: 50px;
                    }
                }

                &.blue-btn .icon-circle {
                    background: #2199f8;
                }

                &.green-btn .icon-circle {
                    background: #07c160;
                }

                &.orange-btn .icon-circle {
                    background: #ff790b;
                }

                .btn-label {
                    font-size: 12px;
                    color: #fff;
                }
            }
        }

        .cancel-btn {
            text-align: center;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
        }
    }
}
</style>