feiniao-farm-h5/src/views/old_mini/modify_work/reviewWork.vue

<template>
    <div class="work-wrap">
        <custom-header name="农事详情" :isClose="paramsPage.goBack ? false : true"></custom-header>
        <div
            class="work-content recheck-title"
            :class="{ 'no-bottom': curRole == '0' && (!workItem.reviewImage || !workItem.reviewImage.length) }"
            v-loading="loading"
        >
            <div class="tabs-content-item">
                <div class="common-card-title">
                    <img class="icon" src="@/assets/img/home/label-icon.png" alt="" />
                    <span>农事信息</span>
                </div>
                <div class="info-box">
                    <div class="info-l">
                        <img class="farm-img" src="@/assets/img/home/farm.png" alt="" />
                    </div>
                    <div class="info-r">
                        <div class="farm-name">{{ workItem.farmName }}</div>
                        <div class="info-item">
                            <div class="info-name">农事名称：</div>
                            <div class="info-value">{{ workItem.farmWorkName }} ({{ workItem.executeDate }})</div>
                        </div>
                        <div class="info-item">
                            <div class="info-name">农事目的：</div>
                            <div class="info-value">{{ workItem.purpose || "--" }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-name">肥药处方：</div>
                            <div class="info-value">
                                <div class="rescription" v-if="workItem?.prescriptionList">
                                    <span
                                        v-for="(fertilizer, fertilizerI) in workItem.prescriptionList"
                                        :key="fertilizerI"
                                    >
                                        <span
                                            v-for="(pest, pestI) in fertilizer.pesticideFertilizerList"
                                            :key="'sub' + pestI"
                                        >
                                            {{ pest.defaultName || pest.pesticideFertilizerName }}
                                            <span
                                                v-if="
                                                    pestI !== fertilizer.pesticideFertilizerList.length - 1 ||
                                                    fertilizerI !== workItem.prescriptionList.length - 1
                                                "
                                            >
                                                +
                                            </span>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="info-box subject-content">
                    <div class="subject-box">
                        <div class="subject-item cost-l">
                            <img class="subject-img" src="@/assets/img/home/nz.png" alt="" />
                            <div class="subject-tag">
                                {{ workItem.serviceMain }}
                                <el-icon class="right-icon" size="10"><ArrowRight /></el-icon>
                            </div>
                        </div>
                        <div class="subject-item">
                            <img class="subject-img" :src="workItem.expertIcon" alt="" />
                            <div class="subject-tag">
                                {{ workItem.expertName }}
                                <el-icon class="right-icon" size="10"><ArrowRight /></el-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tabs-content-item">
                <div class="common-card-title">
                    <img class="icon" src="@/assets/img/home/label-icon.png" alt="" />
                    <span>复核成效</span>
                </div>
                <div class="info-box bottom-box">
                    <div class="recheck-box">
                        <div class="recheck-ablum">
                            <div class="img-list over-img-box">
                                <album-carousel :key="1" labelText="农事前" :images="triggerImg"></album-carousel>
                            </div>
                            <div class="img-list over-img-box">
                                <album-carousel
                                    class="execute-img"
                                    :key="1"
                                    labelText="执行照片"
                                    :images="workItem.executeEvidence"
                                ></album-carousel>
                            </div>
                            <div
                                class="img-list over-img-box"
                                v-if="workItem.reviewImage && workItem.reviewImage.length"
                            >
                                <album-carousel
                                    :key="2"
                                    labelText="农事后"
                                    :images="workItem.reviewImage"
                                ></album-carousel>
                            </div>
                            <div class="img-list over-img-box" v-if="combinedReviewImages.length">
                                <album-carousel :key="3" :images="combinedReviewImages"></album-carousel>
                            </div>
                            <div class="img-list" v-else>
                                <div
                                    class="recheck-text-wrap active"
                                    :class="{
                                        'center-wrap': !imageArr.length,
                                    }"
                                >
                                    <div class="date" v-show="workItem.reviewDate">{{ workItem.reviewDate }}</div>
                                    <upload
                                        exampleImg
                                        @handleUpload="handleUpload"
                                        class="upload-wrap"
                                        :style="{
                                            height:
                                                imageArr.length && !diffInDays(workItem.reviewDate) > 0
                                                    ? 'auto'
                                                    : '254px',
                                        }"
                                    >
                                        <template
                                            v-if="
                                                diffInDays(workItem.reviewDate) == 0 ||
                                                diffInDays(workItem.reviewDate) == null
                                            "
                                        >
                                            <img
                                                class="img-icon"
                                                :src="require(`@/assets/img/gallery/img-icon-act.png`)"
                                                alt=""
                                            />
                                            <div class="recheck-text">点击上传照片</div>
                                        </template>
                                        <!-- <template v-else>
                                            <img class="img-icon" src="@/assets/img/gallery/img-icon.png" alt="" />
                                            <div class="recheck-text">等待复核</div>
                                            <div class="recheck-desc" v-show="diffInDays(workItem.reviewDate) >= 0">
                                                （剩余{{ diffInDays(workItem.reviewDate) }}天）
                                            </div>
                                        </template> -->
                                    </upload>
                                    <div
                                        class="submit"
                                        v-show="imageArr.length && !diffInDays(workItem.reviewDate) > 0"
                                        @click="handleSubmit('reviewImage2')"
                                    >
                                        确认上传
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="img-list" v-else>
                                <div
                                    class="recheck-text-wrap no-events"
                                    :class="{
                                        active: !diffInDays(workItem.reviewDate) > 0 && curRole === '0',
                                        'yse-events': curRole === '0' && !diffInDays(workItem.reviewDate) > 0,
                                        'center-wrap': !imageArr2.length,
                                    }"
                                >
                                    <div class="date" v-show="workItem.reviewDate">{{ workItem.reviewDate }}</div>
                                    <upload
                                        exampleImg
                                        @handleUpload="handleUpload2"
                                        class="upload-wrap"
                                        :style="{
                                            height:
                                                imageArr2.length && !diffInDays(workItem.reviewDate) > 0
                                                    ? 'auto'
                                                    : '254px',
                                        }"
                                    >
                                        <template
                                            v-if="
                                                diffInDays(workItem.reviewDate) == 0 ||
                                                diffInDays(workItem.reviewDate) == null
                                            "
                                        >
                                            <img
                                                class="img-icon"
                                                :src="
                                                    require(`@/assets/img/gallery/img-icon${
                                                        curRole === '0' ? '-act' : ''
                                                    }.png`)
                                                "
                                                alt=""
                                            />
                                            <div class="recheck-text">
                                                {{ curRole === "2" ? "等待农户上传" : "点击上传照片" }}
                                            </div>
                                            <div
                                                class="recheck-desc"
                                                v-show="curRole === '2' && diffInDays(workItem.reviewDate) != 0"
                                            >
                                            </div>
                                        </template>
                                        <template v-else>
                                            <img class="img-icon" src="@/assets/img/gallery/img-icon.png" alt="" />
                                            <div class="recheck-text">等待复核</div>
                                            <div class="recheck-desc" v-show="diffInDays(workItem.reviewDate) >= 0">
                                                （剩余{{ diffInDays(workItem.reviewDate) }}天）
                                            </div>
                                        </template>
                                    </upload>
                                    <div
                                        class="submit"
                                        v-show="imageArr2.length && !diffInDays(workItem.reviewDate) > 0"
                                        @click="handleSubmit('reviewImage2')"
                                    >
                                        确认上传
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 按钮 -->
            <div class="up-btn-group" v-show="isPlan">
                <template v-if="curRole === '2'">
                    <div
                        class="up-btn"
                        :class="{ btn: workItem.executeEvidence && workItem.executeEvidence.length }"
                        v-show="workItem.reviewImage && !workItem.reviewImage.length"
                    >
                        提醒农户拍照
                    </div>
                </template>
                <template v-else>
                    <div
                        class="up-btn btn"
                        @click="handleContact"
                        v-show="workItem.reviewImage && workItem.reviewImage.length && !imageArr.length"
                    >
                        联系专家
                    </div>
                </template>
            </div>

            <div class="fixed-btn-wrap" v-if="curRole == '2'">
                <template v-if="workItem.reviewImage && workItem.reviewImage.length">
                    <div class="fixed-btn more" @click="handleMore">查看更多农事</div>
                    <div class="fixed-btn excute" @click="handleShare">生成成果报告</div>
                </template>
                <template v-else>
                    <div class="fixed-btn second" @click="handleRemindUser">提醒农户拍照</div>
                </template>
            </div>
            <div
                class="fixed-btn-wrap center"
                v-if="curRole == '0' && workItem.reviewImage && workItem.reviewImage.length"
            >
                <div class="fixed-btn excute" @click="handleShare">转发</div>
            </div>

            <!-- 组合照片（用于生成合成图片） -->
            <div class="review-hide-box">
                <div class="review-image" ref="reviewComboRef">
                    <div class="review-mask">
                        <div class="review-text">复核成效</div>
                        <div class="review-content">
                            促进分蘖芽萌发、加快分蘖生长，同时补充氮素等关键养分，增强植株长势，为形成足够穗数、提高群体产量打基础。
                        </div>
                    </div>
                    <div class="vs-wrap" v-if="workItem?.reviewImage && workItem?.reviewImage?.length">
                        <img src="@/assets/img/home/vs.png" alt="" />
                    </div>
                    <div class="review-image-item" v-if="triggerImg?.length">
                        <div class="review-image-item-title">农事前</div>
                        <img
                            class="review-image-item-img left-img"
                            :src="base_img_url2 + triggerImg[triggerImg.length - 1].cloudFilename"
                            alt=""
                        />
                    </div>
                    <div class="review-image-item" v-if="workItem?.reviewImage?.length">
                        <div class="review-image-item-title">农事后</div>
                        <img
                            class="review-image-item-img right-img"
                            :src="base_img_url2 + workItem.reviewImage[workItem.reviewImage.length - 1]"
                            alt=""
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- 上传图片弹窗 -->
        <upload-popup :executionData="workItem"></upload-popup>
        <!-- 分享农事成效弹窗 -->
        <review-popup ref="reviewPopupRef" />

        <!-- 上传农事成效弹窗 -->
        <upload-execute ref="uploadExecuteRef" :onlyShare="true" />
    </div>
</template>

<script setup>
import { Tab, Tabs } from "vant";
import customHeader from "@/components/customHeader.vue";
import { onMounted, ref, onDeactivated, onActivated, onUnmounted, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import upload from "@/components/upload";
import AlbumCarousel from "@/components/album_compoents/albumCarousel";
import { ElMessage } from "element-plus";
import uploadPopup from "@/components/popup/uploadPopup.vue";
import { base_img_url2 } from "@/api/config";
import reviewPopup from "@/views/old_mini/task_condition/components/reviewPopup.vue";
import uploadExecute from "@/views/old_mini/task_condition/components/uploadExecute.vue";
import html2canvas from "html2canvas";

const route = useRoute();
const router = useRouter();
const uploadExecuteRef = ref(null);
const workItem = ref({});
const curRole = ref("");
// 农事规划页面-显示上传农事凭证按钮
const isPlan = ref(false);
const loading = ref(false);
const reviewComboRef = ref(null);
const combinedReviewImages = ref([]);

const diffInDays = (date, type = "minus") => {
    const targetDate = new Date(date);
    const currentDate = new Date(); // 获取当前系统时间
    let diffInMs;
    if (type === "minus") {
        diffInMs = targetDate - currentDate;
    } else {
        diffInMs = currentDate - targetDate;
    }
    const day = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
    return day + 1 >= 0 ? day + 1 : null;
};

const paramsPage = ref({});
onActivated(() => {
    window.scrollTo(0, 0);
    curRole.value = localStorage.getItem("SET_USER_CUR_ROLE");
    paramsPage.value = route.query.miniJson ? JSON.parse(route.query.miniJson) : {};
    getDetail();
    getTriggerImg(paramsPage.value.id);
});

const getDetail = () => {
    if (!paramsPage.value.id) return;
    loading.value = true;
    VE_API.z_farm_work_record
        .getDetail({ id: paramsPage.value.id })
        .then(({ data }) => {
            workItem.value = data[0];
        })
        .finally(() => {
            loading.value = false;
        });
};

const triggerImg = ref([]);
const getTriggerImg = (farmWorkRecordId) => {
    VE_API.z_farm_work_record.getTriggerImg({ farmWorkRecordId }).then(({ data }) => {
        triggerImg.value = data || [];
    });
};

// 生成组合照片，传给相册组件
const generateCombinedReviewImage = async () => {
    if (!reviewComboRef.value) return;
    try {
        await nextTick();
        const el = reviewComboRef.value;
        const canvas = await html2canvas(el, {
            backgroundColor: "#ffffff00",
            allowTaint: true, // 允许跨域图片
            useCORS: true, // 使用CORS
            scale: 2, // 提高分辨率（2倍）
            logging: true, // 开启日志（调试用）
        });
        const dataUrl = canvas.toDataURL("image/png");
        combinedReviewImages.value = [dataUrl];
    } catch (e) {
        console.error("生成组合照片失败", e);
    }
};

watch(
    () => [triggerImg.value, workItem.value.reviewImage],
    ([preImgs, reviewImgs]) => {
        if (preImgs && preImgs.length && reviewImgs && reviewImgs.length) {
            generateCombinedReviewImage();
        }
    },
    { deep: true }
);

//确认上传
const handleSubmit = () => {
    const params = {
        executeEvidence: imageArr.value,
        recordId: workItem.value.id,
    };
    VE_API.monitor.addReviewImg(params).then(({ code }) => {
        if (code === 0) {
            getDetail();
            ElMessage.success("您已上传成功");
            imageArr.value = [];
        }
    });
};

const reviewPopupRef = ref(null);
const handleShare = () => {
    const preImg = triggerImg.value.length
        ? base_img_url2 + triggerImg.value[triggerImg.value.length - 1].cloudFilename
        : "";
    const resImg = workItem.value?.reviewImage?.length
        ? base_img_url2 + workItem.value.reviewImage[workItem.value.reviewImage.length - 1]
        : "";
    reviewPopupRef.value.handleShowPopup(workItem.value.id, preImg, resImg);
};

const handleRemindUser = () => {
    uploadExecuteRef.value.showPopup({ ...workItem.value, type: "remindUser" });
};

const handleMore = () => {
    router.push(`/service_detail?farmId=${workItem.value.farmId}`);
};

// 清理数据的函数
const clearData = () => {
    workItem.value = {};
    triggerImg.value = [];
    imageArr.value = [];
    paramsPage.value = {};
    isPlan.value = false;
    curRole.value = "";
    loading.value = false;
};

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

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

// //联系专家
// const handleContact = () => {
//     router.push(`/dialogue?userId=${workItem.value.expert}&name=${workItem.value.expertUserName}`);
// };

const imageArr = ref([]);
const handleUpload = ({ imgArr }) => {
    imageArr.value = imgArr;
};
</script>

<style lang="scss" scoped>
.work-wrap {
    .center-wrap {
        ::v-deep {
            .van-uploader__wrapper {
                justify-content: center;
            }
        }
    }
    .work-content {
        padding-top: 1px;
        background: #f5f5f5;
        padding-bottom: 12px;
        font-size: 14px;
        height: calc(100vh - 40px);
        box-sizing: border-box;
        overflow: auto;
        &.recheck-title {
            padding-bottom: 86px;
            .common-card-title {
                font-size: 16px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #f5f5f5;
                padding-bottom: 10px;
                .icon {
                    width: 14px;
                    height: 8px;
                    padding-right: 6px;
                }
            }
            &.no-bottom {
                padding-bottom: 26px;
            }
        }
        .up-btn-group {
            position: fixed;
            bottom: 80px;
            left: 12px;
            display: flex;
            justify-content: center;
            width: calc(100% - 24px);
            .up-btn {
                background: linear-gradient(45deg, #9fd5ff, #2199f8);
                flex: 1;
                height: 40px;
                border: 2px solid rgba(255, 255, 255, 0.66);
                color: #fff;
                font-size: 14px;
                border-radius: 40px;
                line-height: 38px;
                text-align: center;
                box-sizing: border-box;
            }
            .orange {
                margin-left: 12px;
                background: linear-gradient(45deg, #ffd887, #ed9e1e);
            }
            .btn {
                width: 200px;
                flex: none;
            }
        }

        .fixed-btn-wrap {
            position: fixed;
            z-index: 10;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px 12px 25px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
            &.center {
                justify-content: center;
            }
            .fixed-btn {
                width: 120px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                background: linear-gradient(180deg, #70bffe, #2199f8);
                border-radius: 25px;
                color: #fff;
                font-size: 14px;
                box-sizing: border-box;
                &.expert {
                    width: 180px;
                }
                &.orange {
                    color: #ff953d;
                    border: 1px solid #ff953d;
                    background: #fff;
                }
                &.excute {
                    background: linear-gradient(180deg, #ffd887, #ed9e1e);
                }
                &.more {
                    background: #ffffff;
                    border: 1px solid rgba(153, 153, 153, 0.5);
                    color: #666666;
                }
                &.second {
                    background: #ffffff;
                    border: 1px solid #2199f8;
                    color: #2199f8;
                }
            }
        }
        .tabs-content-item {
            padding: 12px 12px 16px 12px;
            margin: 0 12px;
            border-radius: 8px;
            background: #fff;
            margin-top: 12px;
            position: relative;
            .execute-img {
                margin-top: 12px;
            }
            .card-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 10px;
                .card-title-l {
                    display: flex;
                    align-items: center;
                    font-size: 16px;

                    .icon {
                        width: 14px;
                        height: 8px;
                        padding-right: 6px;
                    }
                }
                .card-title-r {
                    font-size: 14px;
                    color: #2199f8;
                }
            }
            .info-box {
                &.subject-content {
                    border: none;
                }
                &.cost-wrap {
                    padding-top: 8px;
                }
                &.bottom-box {
                    flex-direction: column;
                }
                padding-top: 12px;
                display: flex;
                align-items: center;
                .info-l {
                    .farm-img {
                        width: 78px;
                        width: 78px;
                        border-radius: 8px;
                        object-fit: scale-down;
                    }
                }
                .info-r {
                    padding-left: 12px;
                }
                .farm-name {
                    font-weight: bold;
                    font-size: 14px;
                    color: #000;
                    padding-bottom: 4px;
                }
                .info-item {
                    display: flex;
                    font-size: 12px;
                    .info-name {
                        color: #bbbbbb;
                        flex: none;
                    }
                    .info-value {
                        color: #666666;
                    }
                }
                .info-item + .info-item {
                    margin-top: 4px;
                }
            }
            .subject-box {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                background: #fafafa;
                .subject-item {
                    border-radius: 8px;
                    padding: 4px 4px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 33%;
                    .subject-img {
                        width: 30px;
                        height: 30px;
                        object-fit: cover;
                        border-radius: 50%;
                        padding-bottom: 4px;
                    }
                    .subject-tag {
                        font-size: 12px;
                        padding: 2px 3px 3px 8px;
                        background: #e0efff;
                        color: #2199f8;
                        border-radius: 4px;

                        &.cost-text {
                            margin-left: 8px;
                            font-size: 16px;
                            color: #2199f8;
                            padding: 1px 8px;
                        }
                    }
                }
                .subject-item + .subject-item {
                    margin-left: 6px;
                }

                .cost-l {
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        top: 16px;
                        height: calc(100% - 32px);
                        width: 1px;
                        background: rgba(0, 0, 0, 0.05);
                    }
                }
            }
            .cost-box {
                border-radius: 5px;
                background: none;
                .cost-item {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                }
                .subject-item {
                    background: none;
                    width: 50%;
                }
                .cost-l {
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        right: 0;
                        top: 0;
                        height: 100%;
                        width: 1px;
                        background: rgba(0, 0, 0, 0.05);
                    }
                }
                .cost-text {
                    font-size: 16px;
                    color: #2199f8;
                    padding-bottom: 5px;
                }
            }
            .recheck-box,
            .recheck-ablum {
                width: 100%;
            }
            .evaluate {
                background: #fff;
                border-radius: 5px;
                padding: 4px 8px 10px 8px;
                margin-right: 8px;
                .evaluate-title {
                    font-size: 16px;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 8px;
                    .more {
                        font-size: 14px;
                        color: #999999;
                        font-weight: 400;
                        display: flex;
                        align-items: center;
                    }
                }
                .rate {
                    display: flex;
                    justify-content: space-between;
                    ::v-deep {
                        .el-rate {
                            --el-rate-icon-margin: 0;
                        }
                        .el-rate--small .el-rate__icon {
                            font-size: 12px;
                        }
                    }
                    .rate-item {
                        display: flex;
                        align-items: center;
                        border-radius: 4px;
                        padding: 4px 0px;
                        font-size: 11px;
                        .name {
                            margin-right: 2px;
                            color: #666666;
                            position: relative;
                            top: 2px;
                        }
                        .num {
                            color: #f3c11d;
                            margin-left: 2px;
                        }
                    }
                    .line {
                        width: 1px;
                        height: 12px;
                        background: #cdd7e1;
                        position: relative;
                        top: 13px;
                        margin: 0 3px;
                    }
                }
                .comment {
                    .user-info {
                        display: flex;
                        align-items: center;
                        margin-bottom: 2px;
                        .user-name {
                            font-weight: 500;
                            margin-left: 8px;
                            span {
                                font-weight: 400;
                                font-size: 12px;
                                color: #999999;
                            }
                        }
                    }
                }
            }
            .img-list + .img-list,
            .upload-wrap {
                margin-top: 12px;
            }
            .over-img-box {
                ::v-deep {
                    img {
                        border-radius: 8px;
                    }
                }
            }
            .img-list {
                width: 100%;
            }
            .upload-wrap {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 254px;
                width: 100%;
                padding: 25px 0 12px 10px;
                box-sizing: border-box;
            }
            .recheck-text-wrap {
                width: 100%;
                border-radius: 8px;
                background: #f2f3f5;
                color: #666666;
                font-size: 14px;
                position: relative;
                &.active {
                    background: rgba(33, 153, 248, 0.1);
                    border: 1px solid #2199f8;
                    color: #2199f8;
                    .date {
                        background: linear-gradient(170deg, #9fd5ff, #2199f8);
                    }
                    .recheck-desc {
                        color: #2199f8;
                    }
                }
                .submit {
                    background: #2199f8;
                    border-radius: 4px;
                    padding: 8px;
                    font-size: 16px;
                    color: #fff;
                    margin: 0 10px 16px;
                    text-align: center;
                }
                .date {
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #bebebe;
                    border-radius: 8px 0 8px 0;
                    color: #fff;
                    font-size: 12px;
                    padding: 3px 6px;
                    font-family: "PangMenZhengDao";
                }
                .recheck-text {
                    padding: 8px 0 2px 0;
                }
                .recheck-desc {
                    font-size: 12px;
                    color: #999999;
                }
                .img-icon {
                    width: 40px;
                    height: 40px;
                }
            }
            .sub-title {
                display: flex;
                align-items: center;
                justify-content: center;
                .sub-line {
                    width: 12px;
                    height: 2px;
                    border-radius: 1px;
                    background: #d9d9d9;
                }
                .sub-name {
                    padding: 0 5px;
                    font-size: 14px;
                    color: #666666;
                }
            }
        }
    }

    .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;
            }
            .left-img {
                border-radius: 8px 0 0 8px;
            }
            .right-img {
                border-radius: 0 8px 8px 0;
            }
        }
    }
}
</style>