baise-pc-vue/src/views/home/album/index.vue

<template>
    <div class="album-page">
        <div class="album-wrap" ref="scrollContainer">
            <!-- <div class="barrage-title">
                农情动态
            </div> -->
            <div class="album-content">
                <div class="album-bottom">
                    <el-affix :offset="108">
                        <div class="album-l">
                            <el-menu default-active="0" class="el-menu-vertical-demo">
                                <el-menu-item
                                    v-for="(item, index) in farmWorkList"
                                    :key="index"
                                    :index="index.toString()"
                                    :id="'menu' + index"
                                    :class="{ active: activeSection === index }"
                                    @click="scrollToSection(index)"
                                    v-show="item.menu"
                                >
                                    <img
                                        class="menu-icon"
                                        :src="
                                            require('@/assets/img/gallery/icon-' +
                                                item.icon +
                                                (item.statuss === 0 ? '-no' : '') +
                                                '.png')
                                        "
                                    />
                                    <div
                                        :class="[
                                            'menu-name',
                                            {
                                                noTime: item.status === 0,
                                                onTime: item.status === 2,
                                                now: item.status === 1,
                                            },
                                        ]"
                                    >
                                        {{ item.farmWorkName }}
                                    </div>
                                </el-menu-item>
                            </el-menu>
                        </div>
                    </el-affix>
                    <!-- <div
                        class="export-btn"
                        v-show="farmId == 766 || farmId == 1"
                        @click="handleExport"
                        :style="{ bottom: `${tabBarHeight}px` }"
                    >
                        <div class="btn-item"><img src="@/assets/img/old_mini/export.png" />导出</div>
                    </div> -->
                    <div class="album-r" @scroll="debouncedHandleScroll2">
                        <div
                            class="done-card section"
                            v-for="(card, cardI) in farmWorkList"
                            :key="cardI"
                            :class="{ flashing: card.status === 1 && isFlashing }"
                        >
                            <div
                                class="card-dom"
                                :id="'section' + cardI"
                            ></div>
                            <div v-if="card.status === 1 && indicatorChartData.content" class="log-wrap">
                                <div class="log-box">
                                    <div class="log-title PangMenZhengDao-FONT">
                                        <span>果园日志</span>
                                    </div>
                                    <div class="log-content">
                                        <div class="log-desc" v-html="indicatorChartData?.content"></div>
                                        <indicatorChart
                                            :key="cardI+'log'"
                                            :isDark="true"
                                            :chartData="indicatorChartData"
                                        ></indicatorChart>
                                    </div>
                                    <div v-show="farmId == 766" class="time-img">
                                        <photo-provider :photo-closable="true">
                                            <photo-consumer
                                                class="time-item"
                                                :src="require('@/assets/img/gallery/time.png')"
                                            >
                                            <img src="@/assets/img/gallery/time.png" style="width: 100%" />
                                            </photo-consumer>
                                        </photo-provider>
                                        <!-- <img src="@/assets/img/gallery/time.png" /> -->
                                    </div>
                                </div>
                            </div>
                            <div class="card-wrap" :class="{ noCarousel: card.status !== 0, 'done': card.status === 0 }">
                                <div
                                    class="card-content"
                                    :class="{ push: card.status === 1, hasBg: card.status === 2 && !card.hasBg }"
                                >
                                    <div
                                        class="card-top"
                                        @click.stop="showDetail(card)"
                                    >
                                        <!-- :class="{ noChart: !card.indexChart.length }" -->
                                        <div class="card-title serve-title">
                                            <div class="title-name">{{ card.farmWorkName }}</div>
                                            <div v-if="card.type === 1" class="status-tag standard">标准农事</div>
                                            <div v-if="card.type === 2" class="status-tag advice">推荐农事</div>
                                            <div v-if="card.type === 0" class="status-tag warning">预警农事</div>
                                            <!-- 右上角角标 -->
                                            <div v-if="card.status === 2 && card.execute === 0" class="add-btn">
                                                未触发
                                            </div>
                                            <div
                                                v-if="card.execute === 2"
                                                class="add-btn unactive"
                                            >
                                                未激活
                                            </div>
                                            <div v-if="card.execute === 3" class="add-btn">待执行</div>
                                            <div v-if="card.status === 0 && card.execute === 4" class="add-btn recheck">
                                                已完成
                                            </div>
                                            <div v-if="card.status === 0 && card.reCheck === 1" class="add-btn recheck">
                                                已复核
                                            </div>
                                            <div v-if="card.execute === 1" class="add-btn unactive">已失效</div>
                                        </div>
                                        <!-- <div v-else class="card-title">
                                            <div class="title-name">{{ card.farmWorkName }}</div>
                                            <div class="status-tag blue">{{ card.reCheck ? "已复核" : "已完成" }}</div>
                                            <div class="status-tag blue good-wrap">
                                                优<img class="good" src="@/assets/img/weather_index/good.png" />
                                            </div>
                                        </div> -->
                                        <div v-if="card.status === 0">
                                            <!-- 已完成 -->
                                            <div class="card-desc">
                                                <span class="desc-title">服务主体：</span>
                                                {{ card.serviceMain || "大荔农业" }}
                                            </div>
                                            <div class="card-desc">
                                                <span class="desc-title">执行主体：</span>
                                                {{ card.executeMain || "大荔农业" }}
                                            </div>
                                            <div class="card-desc">
                                                <span class="desc-title">指导专家：</span>
                                                <span class="expert-link" @click="toExpert(card.expertName)">
                                                    {{ card.expertName }}
                                                    <el-icon color="#F0AC37" class="icon" size="12"><Link /></el-icon>
                                                </span>
                                            </div>
                                        </div>
                                        <div v-else>
                                            <div class="card-desc condition-wrap">
                                                <span class="desc-title">触发条件：</span>
                                                {{ card.condition }}
                                            </div>
                                            <div class="card-desc">
                                                <span class="desc-title">农事编号：</span>
                                                {{ card.code }}
                                            </div>
                                            <div v-if="card.status === 2" class="card-desc">
                                                <span class="desc-title">推荐时间：</span>
                                                {{ card.solarName }}
                                            </div>
                                            <div v-if="card.status === 1" class="card-desc">
                                                <span class="desc-title">推荐时间：</span>
                                                {{ card.executeDate }}
                                            </div>
                                            <div v-if="card.status === 0" class="card-desc">
                                                <span class="desc-title">{{
                                                    card.reCheck ? "复核时间：" : "执行时间："
                                                }}</span>
                                                {{ card.executeDate }}
                                            </div>
                                        </div>
                                        <div class="card-desc last-desc">
                                            <span class="desc-title">药物处方：</span>
                                            <div class="rescription-wrap">
                                                <div class="rescription">
                                                    <span
                                                        v-for="(
                                                            fertilizer, fertilizerI
                                                        ) in card.pesticideFertilizerList"
                                                        :key="fertilizerI"
                                                    >
                                                        {{ fertilizer.ratio ? fertilizer.ratio + "倍" : "" }}
                                                        {{ fertilizer.name }}
                                                        <span
                                                            v-if="
                                                                fertilizerI !== card.pesticideFertilizerList.length - 1
                                                            "
                                                        >
                                                            +
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="detail-text">查看详情></div>
                                            </div>
                                        </div>
                                        <div class="card-link" v-if="card.status === 2" @click.stop="handlePage(card)">
                                            <img src="@/assets/img/gallery/expert-icon.png" />
                                            <div class="expert-name">
                                                {{ card.expertName
                                                }}<el-icon size="12" class="icon"><ArrowRightBold /></el-icon>
                                            </div>
                                        </div>
                                        <div class="step-box" v-else>
                                            <step-box :card="card" :isDone="card.status === 0 && (card.reCheck === 1 || card.execute === 4)" v-if="card.orderStatus || card.status === 0 || card.orderStatus === 0"></step-box>
                                        </div>
                                    </div>
                                    <chart
                                        v-if="card.status !== 2 && card.indexChart.length && card.status !== 0"
                                        :key="cardI"
                                        :indexName="card.indexName"
                                        :type="card.status !== 1 ? 'normal' : 'feature'"
                                        :chartData="card.indexChart"
                                    ></chart>

                                    <div v-if="card.status === 0 && card.userEvaluation">
                                        <div class="evaluate">
                                            <div class="evaluate-title">用户评价</div>
                                            <div class="comment">
                                                <div class="user-info">
                                                    <el-avatar
                                                        class="avatar"
                                                        :size="40"
                                                        :src="card.userEvaluation.icon"
                                                    />
                                                    <div class="user-name">
                                                        <div>{{ card.userEvaluation.commentUserName || "麦田守望者" }}</div>
                                                        <span>{{ card.userEvaluation.commentDate }}</span>
                                                    </div>
                                                </div>
                                                <div class="rate">
                                                    <div class="rate-item">
                                                        <span class="name">专家</span>
                                                        <el-rate v-model="card.userEvaluation.expertServiceRating" size="small" />
                                                    </div>
                                                    <div class="rate-item">
                                                        <span class="name">农资</span>
                                                        <el-rate v-model="card.userEvaluation.agricultureServiceRating" size="small" />
                                                    </div>
                                                    <div class="rate-item">
                                                        <span class="name">农服</span>
                                                        <el-rate v-model="card.userEvaluation.farmServiceRating" size="small" />
                                                    </div>
                                                </div>
                                                <div class="text van-multi-ellipsis--l2">
                                                    {{ card.userEvaluation.detailedComment }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="card.status !== 2" :class="['over-img']">
                                <!-- 图片列表 -->
                                <album-carousel7d
                                    :key="farmName"
                                    :farmId="farmId"
                                    :farmWork="card"
                                ></album-carousel7d>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

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


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

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

const handlePage = (item) =>{
    router.push('/expert_page?name='+item.expertName)
}

const toExpert = (expertName) =>{
    router.push('/expert_page?name='+expertName)
}

onMounted(() => {
    sampleId.value = 766;
    farmId.value = 88388;

    // window.addEventListener("scroll", debouncedHandleScroll);

    getFarmDetail(farmId.value);
    getFarmWorkList(farmId.value);
    getFarmLog()
    window.addEventListener("scroll", debouncedHandleScroll);
});

const sampleId = ref(null);
const farmId = ref(null);


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

// 果园日志
const indicatorChartData = ref({})
const getFarmLog = () => {
    VE_API.farm.fetchFarmLog({id: "96966", farmId: 766}).then(({data,code}) => {
      if(code === 0){
        indicatorChartData.value = data
        eventBus.emit('chart:updateOption', indicatorChartData.value)
      } else {
        indicatorChartData.value = {}
      }
    })
}

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

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

const router = useRouter();

const activeSection = ref(0);

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

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

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

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

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

// 显示详情
const showDetail = (card) => {
    const pageParams = {
        activeIndex: activeSection.value,
        card,
    };
    // eventBus.emit("detailDialog:showDialog", pageParams);
    if (card.orderStatus || card.orderStatus === 0) {
        router.push({ path: "/work_detail", query: { data: JSON.stringify(card), recordId: null } });
    }
    if (card.status === 0 && (card.reCheck === 1 || card.execute === 4)) {
        // 农事成效
        router.push({ path: "/ns_recrod_effect", query: { data: JSON.stringify(card) } });
    }
};

const farmName = ref("")
//用户果园数据
const userFarmData = ref([]);
const initUserGardenData = () => {
    VE_API.garden.userGarden({ userId: miniUserId, show3dFarm: false }).then(({ data }) => {
        userFarmData.value = data;
        const arr = data.filter(item =>item.organId===farmId.value)
        farmName.value = arr[0].organId
    });
};

function addNsRecord(){
    router.push({
      path: "/edit_ns_record",
      query: { recordId: null },
    });
}
</script>

<style lang="scss" scoped>
.album-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #011217;

    .album-wrap {
        width: 100%;
        height: 100%;
        
        .slot-right {
        width: 70%;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: right;
        align-items: center;
        padding-right: 12px;
        .btn {
            cursor: pointer;
            background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
            100% 100%;
            margin-right: 5px;
            color: rgba(180,255,251,.8);
            font-weight: bold;
            font-size: 15px;
            width: 92px;
            height: 32px;
            text-align: center;
            line-height: 32px;
        }
        }
        .barrage-title {
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            border: 1px solid #f5f5f5;
            width: 100%;
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
            .title-icon {
                cursor: pointer;
                position: absolute;
                left: 16px;
                top: 13px;
            }
        }
        .album-content {
            height: 100%;
            // overflow: auto;
            // margin-top: 45px;
            .album-fixed {
                position: fixed;
                top: 0;
                z-index: 10;
                background: #fff;
                width: 100%;
            }
            .album-top {
                display: flex;
                padding: 12px 10px 16px 10px;
                width: 100%;
                overflow: hidden;
                box-sizing: border-box;
                .album-img {
                    img {
                        width: 78px;
                        height: 78px;
                        object-fit: cover;
                        border-radius: 6px;
                    }
                }
                .garden-content {
                    position: relative;
                    padding-left: 12px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .report_btn{
                      position: absolute;
                      bottom: 0px;
                      right: 0px;
                      z-index: 1000;
                      width: 40px;
                      height: 40px;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: center;
                      font-size: 8px;
                      color:#ffffff;
                      background: rgba(30, 34, 83, 0.44);
                      border-radius: 5px;
                    }
                    .garden-name {
                        font-weight: bold;
                        font-size: 16px;
                        color: #000000;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .tag-wrap {
                            display: flex;
                            flex-wrap: wrap;
                            flex: 1;
                        }
                        .type-tag {
                            margin-top: 2px;
                            font-weight: normal;
                            margin-left: 4px;
                            padding: 0 6px;
                            height: 21px;
                            line-height: 21px;
                            background: rgba(255, 149, 61, 0.32);
                            border-radius: 2px;
                            // border: 0.5px solid #FF953D;
                            font-size: 12px;
                            color: #fc8a2c;
                            &.item-type {
                                background: #f0e0fe;
                                color: #ac4dff;
                            }
                        }
                    }
                    .garden-text {
                        display: flex;
                        align-items: flex-end;
                        justify-content: space-between;
                        .edit-btn {
                            border: 1px solid #F0AC37;
                            border-radius: 5px;
                            color: #F0AC37;
                            text-align: center;
                            padding: 4px 2px;
                            font-size: 9px;
                            font-weight: bold;
                            box-sizing: border-box;
                            background: rgba(33, 153, 248, 0.22);
                        }
                    }
                    .garden-desc {
                        padding-top: 4px;
                        font-size: 13px;
                        color: #666666;
                    }
                }
            }
            .album-camera {
                width: 100%;
                padding: 0 10px 10px;
                box-sizing: border-box;
                position: relative;
                .tips-text {
                    position: absolute;
                    left: calc(50% + 20px);
                    top: 8px;
                    height: 17px;
                    padding: 1px 5px 2px 8px;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 24px 20px 20px 0;
                    line-height: 18px;
                    background: linear-gradient(45deg, #00d4ff, #008eff);
                }
                img {
                    width: 100%;
                }
            }
            .album-bottom {
                display: flex;
                // height: calc(100% - 106px);
                position: relative;
                background: rgba(73, 73, 73, 0.3);
                height: 100%;
                overflow: hidden;

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

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

                    .done-card {
                        margin-bottom: 10px;
                    }
                    .card-dom {
                        position: relative;
                        // top: -216px;
                        top: -6px;
                    }

                    .over-img {
                        transition: all 0.2s ease-in-out;
                        position: relative;
                        z-index: 2;
                        ::v-deep {
                            img {
                                border-radius: 8px;
                            }
                        }
                    }
                    .log-wrap {
                        padding: 4px 0 10px 0;
                        .log-box {
                            background: #232323;
                            border-radius: 8px;
                            color: #FFD489;
                            border: 1px solid rgba(255, 212, 137, 0.3);
                            .log-title {
                                font-family: "PangMenZhengDao";
                                position: relative;
                                top: -4px;
                                background: url("@/assets/img/gallery/log-bg.png") no-repeat top center / cover;
                                width: 97px;
                                height: 42px;
                                text-align: center;
                                font-size: 18px;
                                color: #fff;
                                span {
                                    position: absolute;
                                    top: 7px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 100%;
                                }
                            }
                            .log-content {
                                padding-bottom: 10px;
                                .log-desc {
                                    padding: 0 10px;
                                    font-size: 14px;
                                    line-height: 22px;
                                }
                            }
                            .time-img {
                                width: 100%;
                                height: 100%;
                                img {
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
            .flashing {
                position: relative;
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -2px;
                    width: 100%;
                    height: calc(100% - 2px);
                    border: 2px solid #F0AC37;
                    animation: flash 0.4s infinite alternate;
                    border-radius: 8px;
                    pointer-events: none;
                }
            }

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

        .evaluate {
            border-top: 1px solid rgba(255, 238, 208, 0.2);
            color: #fff;
            .evaluate-title {
                padding-top: 8px;
                font-size: 14px;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 8px;
                .more {
                    font-size: 14px;
                    color: #fff;
                    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: 11px;
                    }
                }
                .rate-item {
                    display: flex;
                    align-items: center;
                    // background: #f5f5f5;
                    border-radius: 4px;
                    padding: 4px 0px;
                    font-size: 10px;
                    .name {
                        // margin-right: 2px;
                        color: #fff;
                    }
                    .num {
                        color: #f3c11d;
                        margin-left: 2px;
                    }
                }
            }
            .comment {
                margin-top: 12px;
                .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: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>