foster-pc-vue/src/views/home/components/treeDetail.vue

<template>
    <div class="detail-page">
        <chart-box name="果树介绍" arrow="">
            <div class="detail-content">
                <div class="detail-main">
                    <div class="bubble-box">
                        <div class="bubble old">
                            <span>16年</span>
                            <div>树龄</div>
                        </div>
                        <div class="bubble pz">
                            <span>桂味</span>
                            <div>品种</div>
                        </div>
                        <div class="bubble code">
                            <span>A1158</span>
                            <div>唯一编码</div>
                        </div>
                        <div class="bubble cl">
                            <span>100斤</span>
                            <div>高质产量</div>
                        </div>
                        <div class="bubble date">
                            <span>2025.06.08</span>
                            <div>上市时间</div>
                        </div>
                        <div class="bubble zb">
                            <span>92分</span>
                            <div>生态指标</div>
                        </div>
                    </div>
                    <img class="tree" src="@/assets/images/foster-home/tree.png" alt="" />
                    <div class="photo-box">
                        <div class="photo-title">
                            <span>溯源照片</span>
                            <span class="more" @click="handleMore">更多></span>
                        </div>
                        <div class="photo-list">
                            <div class="photo-item" v-for="(item, index) in photoList" :key="index">
                                <img class="img" :src="require(`@/assets/images/foster-home/tree/photo-img-${index}.jpeg`)" alt="" />
                                <div class="date">{{ item.date }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="source-wrap">
                    <div class="source-title">
                        <sub-title name="农事记录">
                            <template v-slot:title-right>
                                <div class="title-right">
                                    更多
                                    <el-icon class="sub-icon"><ArrowRight /></el-icon>
                                </div>
                            </template>
                        </sub-title>
                    </div>
                    <div class="tabs">
                        <div
                            class="tabs-item"
                            :class="{ active: active === index }"
                            v-for="(item, index) in tabsList"
                            :key="index"
                            @click="handleActive(index)"
                        >
                            {{ item }}
                        </div>
                    </div>
                    <div class="list-item" v-for="(ele, idx) in sourceList" :key="idx">
                        <div class="item-flex">
                            <div class="photo">
                                <img src="@/assets/images/foster-home/tree/source.png" alt="" />
                                <div class="date">{{ ele.date }}</div>
                            </div>
                            <div class="item-text">
                                <div class="item-title">{{ ele.name }}</div>
                                <!-- <div class="name">
                                    触发原因：<span class="val">{{ ele.reason }}</span>
                                </div> -->
                                <div class="name">
                                    农事效果：<span class="val">{{ ele.effect }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </chart-box>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import chartBox from "@/components/chartBox.vue";
import subTitle from "@/components/subTitle.vue";
const router = useRouter();

const active = ref(0);
const tabsList = ["全部", "标准", "气象"];
const handleActive = (index) => {
    active.value = index;
    handleItem(index);
};

const photoList = ref([
    {
        date: "2025.06.07",
    },
    {
        date: "2025.05.28",
    },
    {
        date: "2025.05.25",
    },
    {
        date: "2025.05.22",
    },
    {
        date: "2025.05.20",
    },
]);

const sourceList1 = ref([
    {
        name: "梢期根肥",
        reason: "梢期需需要营养时机",
        effect: "增强树体营养，促进新梢健壮，增强病虫抗性",
        date: "2024.07.14",
    },
    {
        name: "壮果根肥",
        reason: "果期要营养时机",
        effect: "促进果实快速膨大，提升单果重；减少生理落果与裂果，改善果实均匀度；增强抗高温/暴雨能力",
        date: "2024.05.07",
    },
    {
        name: "壮花追肥",
        reason: "花期需要营养时机",
        effect: "促进花穗健壮，提高雌花比例；增强花期抗低温/阴雨能力",
        date: "2024.03.07",
    },
    {
        name: "梢期高温干旱",
        reason: "梢期需需要营养时机",
        effect: "每日早晚树冠喷水降温（避开正午高温），以缓解高温抑制新梢生长，促进新梢抽发整齐、根系吸水效率提升",
        date: "2024.10.26",
    },
    {
        name: "果期阴雨寡照",
        reason: "果期要营养时机",
        effect: "补充叶面肥，增强光合作用，促进养分转运，避免光照不足影响，确保果实饱满、甜度高、风味佳",
        date: "2024.05.24",
    },
    {
        name: "花期连续阴雨",
        reason: "花期需要营养时机",
        effect: "雨停间隙人工施粉或放蜂授粉，轻摇树枝排出花穗积水，防止雨水冲刷花粉和霜疫霉病蔓延，确保坐果率恢复",
        date: "2024.04.01",
    },
]);

const sourceList = ref([
    {
        name: "梢期根肥",
        reason: "梢期需需要营养时机",
        effect: "增强树体营养，促进新梢健壮，增强病虫抗性",
        date: "2024.07.14",
    },
    {
        name: "壮果根肥",
        reason: "果期要营养时机",
        effect: "促进果实快速膨大，提升单果重；减少生理落果与裂果，改善果实均匀度；增强抗高温/暴雨能力",
        date: "2024.05.07",
    },
    {
        name: "壮花追肥",
        reason: "花期需要营养时机",
        effect: "促进花穗健壮，提高雌花比例；增强花期抗低温/阴雨能力",
        date: "2024.03.07",
    },
    {
        name: "梢期高温干旱",
        reason: "梢期需需要营养时机",
        effect: "每日早晚树冠喷水降温（避开正午高温），以缓解高温抑制新梢生长，促进新梢抽发整齐、根系吸水效率提升",
        date: "2024.10.26",
    },
    {
        name: "果期阴雨寡照",
        reason: "果期要营养时机",
        effect: "补充叶面肥，增强光合作用，促进养分转运，避免光照不足影响，确保果实饱满、甜度高、风味佳",
        date: "2024.05.24",
    },
    {
        name: "花期连续阴雨",
        reason: "花期需要营养时机",
        effect: "雨停间隙人工施粉或放蜂授粉，轻摇树枝排出花穗积水，防止雨水冲刷花粉和霜疫霉病蔓延，确保坐果率恢复",
        date: "2024.04.01",
    },
]);

const handleItem = (index) => {
    if (index === 0) {
        sourceList.value = sourceList1.value;
    }
    if (index === 1) {
        sourceList.value = sourceList1.value.slice(0, 3);
    }
    if (index === 2) {
        sourceList.value = sourceList1.value.slice(3);
    }
};

const handleMore = () => {
    // router.push("/photo");
};
</script>

<style lang="scss" scoped>
.detail-page {
    position: relative;
    width: 100%;
    height: 100%;
    .detail-content {
        height: 100%;
        overflow: auto;
        .detail-main {
            width: 100%;
            height: 466px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            .bubble-box {
                position: relative;
                width: 100%;
                .bubble {
                    color: #fff;
                    padding: 20px 24px;
                    font-size: 12px;
                    text-align: center;
                    background: url("@/assets/images/foster-home/tree/bubble-bg.png") no-repeat center center / 100% 100%;
                    span {
                        font-size: 13px;
                        font-weight: 500;
                    }
                    &.pz {
                        position: absolute;
                        bottom: -76px;
                        left: 0;
                        padding: 22px 28px;
                    }
                    &.old {
                        position: absolute;
                        left: 270px;
                        bottom: -78px;
                    }
                    &.code {
                        position: absolute;
                        left: 110px;
                        bottom: 0;
                        padding: 38px 16px;
                    }
                    &.cl {
                        position: absolute;
                        left: 25px;
                        bottom: 30px;
                        padding: 24px 18px;
                    }
                    &.date {
                        position: absolute;
                        right: 60px;
                        bottom: -15px;
                        padding: 32px 16px;
                    }
                    &.zb {
                        position: absolute;
                        right: 40px;
                        bottom: -90px;
                        padding: 24px 16px;
                    }
                }
            }
            .tree {
                width: 258px;
                height: 258px;
            }
            .photo-box {
                width: 100%;
                box-sizing: border-box;
                margin-top: 2px;
                margin-bottom: 22px;
                padding: 12px 8px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 12px;
                .photo-title {
                    display: flex;
                    justify-content: space-between;
                    color: #ffffff;
                    font-size: 12px;
                    margin-bottom: 6px;
                    .more {
                        color: #bbbbbb;
                    }
                }
                .photo-list {
                    display: flex;
                    .photo-item {
                        position: relative;
                        .img {
                            width: 58px;
                            height: 58px;
                            border: 1px solid rgba(255, 255, 255, 0.6);
                            border-radius: 10px;
                            object-fit: cover;
                        }
                        .date {
                            position: absolute;
                            color: #dddddd;
                            font-size: 10px;
                            bottom: 1px;
                            left: 1px;
                            background: rgba(0, 0, 0, 0.6);
                            width: calc(100% - 2px);
                            padding: 2px 4px;
                            box-sizing: border-box;
                            border-radius: 0 0 10px 10px;
                        }
                    }
                    .photo-item + .photo-item {
                        margin-left: 8px;
                    }
                }
            }
        }
        .source-wrap {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 10px 10px 0 0;
            .source-title {
                padding: 10px 10px 0 10px;
                            
                .title-right {
                    background: rgba(255, 212, 137, 0.1);
                    border-radius: 20px;
                    font-size: 12px;
                    color: #ffd489;
                    padding: 2px 8px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    .sub-edit {
                        width: 12px;
                        padding-right: 4px;
                    }
                    .sub-icon {
                        padding-left: 2px;
                    }
                }
            }
            .tabs {
                background: transparent;
                border-radius: 10px 10px 0 0;
                display: flex;
                padding: 12px 11px 12px 11px;
                .tabs-item {
                    padding: 6px;
                    border-radius: 20px;
                    color: #FFFFFF;
                    flex: 1;
                    text-align: center;
                    background: rgba(255, 255, 255, 0.08);
                    &.active {
                        background: linear-gradient(180deg, #FFD887, #ED9E1E);
                        color: #1D1D1D;
                    }
                }
                .tabs-item + .tabs-item {
                    margin-left: 8px;
                }
            }
            .item-flex {
                background: rgba(255, 255, 255, 0.04);
                padding: 12px;
                border-radius: 5px;
                .item-title {
                    font-size: 16px;
                    color: #FFFFFF;
                }
            }
            .list-item {
                margin-top: 12px;
            }
        }

        .item-flex {
            display: flex;
            align-items: center;
        }
        .photo {
            width: 76px;
            height: 65px;
            margin-right: 12px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }
            .date {
                position: absolute;
                bottom: 0;
                color: #fff;
                font-size: 10px;
                padding: 2px 13px;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 0 0 8px 8px;
                backdrop-filter: blur(2px);
            }
        }
        .item-text {
            color: #999999;
            font-size: 12px;
            line-height: 1.6;
            flex: 1;
            .name {
                display: flex;
                align-items: center;
                .main-name {
                    font-size: 16px;
                    color: #000;
                    font-weight: bold;
                    padding-right: 10px;
                }
                div {
                    margin-left: 5px;
                    border-radius: 4px;
                    font-size: 12px;
                    padding: 2px 5px;
                    &.mark {
                        background: rgba(50, 203, 226, 0.25);
                        color: #00bedb;
                    }
                    &.age {
                        background: rgba(255, 196, 0, 0.2);
                        color: #f0a400;
                    }
                }
            }
            .van-ellipsis {
                width: 200px;
            }
            .txt {
                span {
                    color: #000;
                }
            }
            .time {
                display: flex;
                align-items: center;
                .icon {
                    margin-right: 4px;
                }
                span {
                    color: #f87321;
                }
            }
        }
    }
}
</style>