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>
        <!-- 组件：天气 -->
        <weather-info ref="weatherInfoRef" from="growth_report" class="weather-info" @weatherExpanded="weatherExpanded"
            @changeGarden="changeGarden" :isGarden="true"></weather-info>
        <div class="report-content-wrap" v-if="hasReport" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.1)">
            <swipe ref="swipeRef" class="my-swipe" :loop="false" indicator-color="white" @change="handleSwipeChange">
                <swipe-item v-for="(item, index) in regionsData" :key="index">
                    <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">
                            <!-- <img class="header-book" src="@/assets/img/home/book.png" alt="" /> -->
                            <div class="time-tag">{{ workItems?.[0]?.reportDate }}</div>
                            <div class="report-title">{{regionsData[currentIndex]?.regionName}}长势报告</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 class="swipe-more-tag" v-show="currentIndex < regionsData.length - 1">
                                左滑查看更多分区
                            </div>
                        </div>

                        <div class="report-box">
                            <div class="box-title warning">今日巡园重点</div>
                            <div class="box-text w-100">
                                <div class="row">
                                    <div
                                        v-for="(card, cardI) in todayPatrolFocus"
                                        :key="cardI"
                                        class="status-card"
                                        :class="card.type"
                                        @click="handleTodayPatrolFocusClick(card)"
                                        >
                                        <!-- <badge class="status-badge" dot 
                                            :offset="[80, -10]">
                                        </badge> -->
                                        <div class="status-title">
                                            {{ card.title }}
                                        </div>
                                        <div class="status-sub">
                                            {{ card.description }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="report-box">
                            <div class="box-title warning">待执行农事</div>
                            <div class="box-text w-100">
                                <div class="row">
                                    <div
                                        v-for="(card, cardI) in pendingFarmWork"
                                        :key="cardI"
                                        class="status-card pending-card"
                                        :style="{ background: card.purposeColor, color: card.purposeColor === '#FFFFFF' ? '#000' : '#fff' }"
                                        :class="card.type"
                                        @click="handlePendingFarmWorkClick(card)"
                                        >
                                        <!-- <badge class="status-badge" dot 
                                            :offset="[80, -10]">
                                        </badge> -->
                                        <div v-if="card.executionLimitDays || card.executionLimitDays === 0" class="tag-name" :style="{ borderColor: card.purposeColor, color: card.purposeColor }">限时 {{ card.executionLimitDays }} 天</div>
                                        <div class="status-title">
                                            {{ card.name }}
                                        </div>
                                        <div class="status-sub pending-sub" :style="{ color: card.purposeColor === '#FFFFFF' ? '#000' : '#fff' }">
                                            {{ card.purposeName }}
                                        </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 v-html="work?.backgroundDesc"></div>
                                </div>
                                <div class="box-advice" v-show="work?.suggestion">
                                    <span class="box-subtitle">对策建议：</span>
                                    <div v-html="work?.suggestion"></div>
                                </div>
                                <div class="box-sum" v-show="work?.summary" v-html="work?.summary"></div>
                            </div>
                        </div>

                        <!-- <div class="report-box">
                            <div class="box-text next-info">
                                <div class="box-bg">
                                    <span class="box-subtitle">下一次农情互动预告：</span>
                                    <div v-html="workItem?.nextInteractionPreview"></div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </swipe-item>
            </swipe>
        </div>

        <div v-else 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">
                    <!-- <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="swipe-guide-mask" v-if="showSwipeGuide" @click="closeSwipeGuide">
            <div class="swipe-guide-content">
                <img class="swipe-guide-icon" src="@/assets/img/home/point.png" alt="swipe" />
                <div class="swipe-guide-text">左滑查看其它分区报告</div>
            </div>
        </div>

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

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

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

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

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

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

const paramsPage = ref({});
const showBindSuccess = ref(false);
const startInteractPopupRef = ref(null);
const agriExecutePopupRef = ref(null);
// 天气组件相关
const isExpanded = ref(false);
const weatherInfoRef = ref(null);

// 首次进入页面的左滑提示遮罩
const showSwipeGuide = ref(false);

const weatherExpanded = (isExpandedValue) => {
    isExpanded.value = isExpandedValue;
};

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

const currentFarmName = ref('');
// 切换农场时，更新报告数据
const changeGarden = ({ id, name }) => {
    if (!id) return;
    currentFarmName.value = name;
    swipeRef.value && swipeRef.value.swipeTo(0, {immediate:true});
    currentIndex.value = 0;
    paramsPage.value = {
        ...(paramsPage.value || {}),
        subjectId: id,
    };
    // 初始化品种/大物候期转换
    startInteractPopupRef.value.getPhenologyInitOrConfirmStatus();
    getRegions();
    if(regionsData.value.length && !route.query.hideInteraction) {
        agriExecutePopupRef.value.showPopup(regionsData.value[currentIndex.value].farmId);
    }
};

onActivated(() => {
    window.scrollTo(0, 0);

    // 如果路由中带有 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 closeSwipeGuide = () => {
    showSwipeGuide.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"));
        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 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) => {
    router.push(`/interaction_list?farmId=${paramsPage.value.farmId}&regionId=${paramsPage.value.regionId}&interactionTypeId=${card.interactionTypeId || 1}`);
}

const getTodayPatrolFocus = () => {
    VE_API.report.todayPatrolFocus({ farmId: paramsPage.value.farmId, regionId:paramsPage.value.regionId }).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 regionsData = ref([]);
const getRegions = async () => {
    VE_API.monitor.listRegionsBySubjectId({
        subjectId: paramsPage.value.subjectId,
    }).then(({ data }) => {
        regionsData.value = data || [];
        if(regionsData.value.length > 0) {
            const guideKey = "GROWTH_REPORT_SWIPE_GUIDE_SHOWN";
            if (!localStorage.getItem(guideKey) && regionsData.value.length > 1) {
                showSwipeGuide.value = true;
                localStorage.setItem(guideKey, "1");
            }
            hasReport.value = true;
            paramsPage.value = {
                ...(paramsPage.value || {}),
                farmId: regionsData.value[currentIndex.value].farmId,
                regionId: regionsData.value[currentIndex.value].regionId,
            };
            getTodayPatrolFocus();
            getPendingFarmWork();
            getDetail();
        } else {
            hasReport.value = false;
        }
    });
}

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

onDeactivated(() => {
    clearData();
});

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

<style lang="scss" scoped>
.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 {
        width: calc(100% - 20px);
        position: absolute;
        z-index: 12;
        left: 10px;
        top: 12px;
    }

    .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;

        .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;
                }
            }
        }
    }

    // 首次进入页面左滑提示遮罩
    .swipe-guide-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;

        .swipe-guide-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            text-align: center;
        }

        .swipe-guide-icon {
            width: 71px;
            height: 79px;
            object-fit: contain;
            margin-bottom: 23px;
        }

        .swipe-guide-text {
            font-size: 20px;
        }
    }

    .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 16px 26px 16px;
        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%;
        }

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

            .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: 2px;
            }

            .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: linear-gradient(90deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.0696) 100%);
                    border-radius: 20px;
                    border: 0.5px solid rgba(33, 153, 248, 0.35);
                    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: 134px;
                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: 20px;
                writing-mode: vertical-rl;
                text-orientation: mixed;
            }
        }

        .report-box {
            display: flex;
            align-items: center;
            padding: 8px;
            background: linear-gradient(0deg, #ffffff 86.32%, #2199f8 136.87%);
            border: 1px solid #ffffff;
            border-radius: 8px;
            gap: 5px;
            position: relative;

            .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;

                .box-subtitle {
                    color: #000;
                }

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

                .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;

                    &.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-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>