feat: 认养申请，确认地址，果树详情

src/components/chartBox.vue

@@ -81,6 +81,7 @@ const handleShrink = () =>{
     overflow: auto;
     padding: 4px 8px;
     box-sizing: border-box;
+    background: #101010;
     .arrow{
         position: absolute;
         right: -16px;

src/views/home/components/addressList.vue

@@ -1,17 +1,259 @@
 <template>
-    <div class="adopt-list">
-      address
+    <div class="address-list">
+        <div class="list-wrap">
+            <div class="list-item" v-for="(item, index) in addressList" :key="index">
+                <div class="item-info">
+                    <div class="tree-icon">
+                        <div class="tree-tag" v-show="item.status === 0">待确认</div>
+                        <div class="tree-tag done" v-show="item.status === 1">已确认</div>
+                        <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" />
+                        <div class="tree-type-name-tag">白糖罂</div>
+                    </div>
+                    <div class="item-center">
+                        <div class="center-t">
+                            BTY-A25
+                            <span class="type-tag">综合:94分</span>
+                            <span class="type-tag">生态:92分</span>
+                            <span class="type-tag">树龄:5年</span>
+                        </div>
+                        <div class="center-item">单价：<span>12元/斤</span></div>
+                        <div class="center-item">预计成熟时间：<span>2025.05.30</span></div>
+                    </div>
+                </div>
+
+                <div v-if="item.status === 0" class="address-wrap">
+                    <div class="info" v-for="(user, userI) in 3" :key="userI">
+                        <div class="avatar">
+                            <el-avatar
+                                :size="53"
+                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                            />
+                            <div class="name">刘浩浩</div>
+                        </div>
+                        <el-divider class="divider" direction="vertical" />
+                        <div class="cont">
+                            <div class="li">发货时间<span>2025.03.22</span></div>
+                            <div class="li">认养斤数<span>50斤</span></div>
+                            <div class="li">收货电话<span>19871533165</span></div>
+                            <div class="li">收货地址<span>湖北省武汉市富丽长信园1520室</span></div>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="user-wrap">
+                    <div class="user-title">权属人</div>
+                    <div class="user-item">
+                      <div class="user-detail" v-for="(owner, oI) in item.owners" :key="oI">
+                        {{ owner.userName }}({{ owner.value }}斤)
+                        <span v-show="oI<item.owners.length-1">/</span>
+                      </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 渐变主色按钮 -->
+        <div class="center-btn" @click="showExport">导出</div>
+        <!-- 导出表格 -->
+        <table-popup :showPopupParent="showPopupParent"></table-popup>
     </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import { onMounted, ref } from "vue";
+import tablePopup from "./tablePopup.vue"
 
-onMounted(()=>{
-})
+const addressList = ref([
+  { status: 1, price: 16, owners: [{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}] },
+  { status: 1, price: 16, owners: [{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}]  },
+  { status: 0, price: 16 },
+  { status: 0, price: 16 },
+]);
+onMounted(() => {});
 
+// 导出
+function showExport() {
+    showPopupParent.value = !showPopupParent.value
+}
+
+const showPopupParent = ref(false)
 </script>
 
 <style lang="scss" scoped>
+.address-list {
+    height: 100%;
+    overflow: auto;
+
+    .type-tag {
+        color: #ffd489;
+        background: rgba(255, 212, 137, 0.06);
+        padding: 2px 4px;
+        font-size: 10px;
+        margin-left: 4px;
+        border-radius: 4px;
+    }
+    .list-wrap {
+        .list-item {
+            background: rgba(255, 255, 255, 0.08);
+            padding: 8px 10px;
+            border-radius: 5px;
+            .item-info {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+            .tree-icon {
+                position: relative;
+                .tree-tag {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    background: #ed9e1e;
+                    border-radius: 5px 0 5px 0;
+                    color: #fff;
+                    padding: 1px 6px;
+                    font-size: 10px;
+                    &.done {
+                        background: #5c5c5c;
+                    }
+                }
+                .tree-type-name-tag {
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 0 5px 5px 0;
+                    font-size: 10px;
+                    width: 100%;
+                    text-align: center;
+                    padding: 1px;
+                    backdrop-filter: blur(2px);
+                }
+                .tree-img {
+                    width: 63px;
+                    height: 63px;
+                    border-radius: 5px;
+                    object-fit: cover;
+                }
+            }
+            .item-center {
+                flex: 1;
+                padding: 0 12px;
+                color: #fff;
+                .center-t {
+                    font-size: 14px;
+                }
+                .center-item {
+                    color: #6c6c6c;
+                    font-size: 12px;
+                    padding-top: 2px;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        .list-item + .list-item {
+            margin-top: 8px;
+        }
 
+        .address-wrap {
+          padding-top: 12px;
+            .info {
+                border-radius: 4px;
+                background: rgba(255, 255, 255, 0.04);
+                padding: 6px 2px 6px 10px;
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                display: flex;
+                align-items: center;
+                margin-top: 8px;
+                box-sizing: border-box;
+                .avatar {
+                    text-align: center;
+                    .name {
+                        background: #fff;
+                        border-radius: 20px;
+                        font-size: 12px;
+                        color: #0d0d0d;
+                        padding: 1px 2px;
+                        position: relative;
+                        z-index: 2;
+                        margin-top: -12px;
+                    }
+                }
+                .divider {
+                    border-color: rgba(252, 252, 252, 0.3);
+                    margin: 0 14px;
+                    height: 50px;
+                }
+                .cont {
+                    .li {
+                        color: #6c6c6c;
+                        position: relative;
+                        margin-left: 10px;
+                        display: flex;
+                        align-items: center;
+                        font-size: 12px;
+                        &::before {
+                            content: "";
+                            position: absolute;
+                            top: 7px;
+                            left: -10px;
+                            width: 4px;
+                            height: 4px;
+                            border-radius: 50%;
+                            background: #6c6c6c;
+                        }
+                        span {
+                            color: #ffffff;
+                            margin-left: 5px;
+                            flex: 1;
+                        }
+                    }
+                }
+            }
+        }
+        .user-wrap {
+          margin-top: 12px;
+          padding: 5px 10px;
+          background: linear-gradient( 90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+          border-radius: 30px 0 0 30px;
+          width: 100%;
+          display: flex;
+          font-size: 12px;
+          .user-title {
+            color: rgba(255, 255, 255, 0.56);
+            padding-right: 5px;
+          }
+          .user-item {
+            display: flex;
+            align-items: center;
+            color: #FFD489;
+          }
+        }
+    }
+    .unit {
+        padding-left: 5px;
+        color: #fff;
+    }
+    .p-t-2 {
+        padding-top: 2px;
+    }
+    
+    .center-btn {
+        position: absolute;
+        bottom: 64px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #000000;
+        border-radius: 20px;
+        font-size: 14px;
+        padding: 7px 10px;
+        cursor: pointer;
+        border: 1px solid #fff;
+        background: linear-gradient(180deg, #ffd887, #ed9e1e);
+        width: 194px;
+        box-sizing: border-box;
+        text-align: center;
+    }
+}
 </style>

src/views/home/components/adoptList.vue

@@ -53,8 +53,8 @@
                         <span class="type-tag">生态:92分</span>
                         <span class="type-tag">树龄:5年</span>
                     </div>
-                    <div class="center-item" v-show="!isManySetting">单价：<span>--元/斤</span></div>
-                    <div class="center-item has-input" v-show="isManySetting || item.settingPrice">
+                    <div class="center-item p-t-2" v-show="!isManySetting">单价：<span>--元/斤</span></div>
+                    <div class="center-item p-t-2 has-input" v-show="isManySetting || item.settingPrice">
                         单价： <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
                         <span class="unit">元/斤</span>
                     </div>
@@ -265,6 +265,7 @@ function settingSinglePrice() {
                 .center-item {
                     color: #6c6c6c;
                     font-size: 12px;
+                    padding-top: 2px;
                     span {
                         color: #fff;
                     }
@@ -317,6 +318,9 @@ function settingSinglePrice() {
             }
         }
     }
+    .p-t-2 {
+        padding-top: 2px;
+    }
     .center-btn {
         position: absolute;
         bottom: 64px;

src/views/home/components/applyList.vue

@@ -1,17 +1,167 @@
 <template>
-    <div class="adopt-list">
-      apply
+    <div class="apply-list">
+        <div class="list-wrap">
+            <div class="list-item" v-for="(item, index) in 10" :key="index">
+              <div class="item-info">
+                <div class="tree-icon">
+                    <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" />
+                    <div class="tree-type-name-tag">白糖罂</div>
+                </div>
+                <div class="item-center">
+                    <div class="center-t">
+                        BTY-A25
+                        <span class="type-tag">综合:94分</span>
+                        <span class="type-tag">生态:92分</span>
+                        <span class="type-tag">树龄:5年</span>
+                    </div>
+                    <div class="center-item p-t-2">单价：<span>12元/斤</span></div>
+                    <div class="center-item">截至分配时间：<span>2025.05.15</span></div>
+                </div>
+              </div>
+
+              <div class="apply-wrap">
+                <div class="apply-item" v-for="(item, index) in 2" :key="index">
+                    <div class="apply-users">
+                        <div class="user-item">
+                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                            <div class="user-name">华国伟</div>
+                        </div>
+                        <div class="user-item">
+                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                            <div class="user-name">华国伟</div>
+                        </div>
+                        <div class="user-item">
+                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
+                            <div class="user-name">华国伟</div>
+                        </div>
+                    </div>
+                    <div class="apply-time">2025.03.29</div>
+                    <div class="apply-btn">
+                        确认分配
+                    </div>
+                </div>
+              </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
-
-onMounted(()=>{
-})
+import { onMounted, ref } from "vue";
 
+onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
+.apply-list {
+    height: 100%;
+    overflow: auto;
+
+    .type-tag {
+        color: #ffd489;
+        background: rgba(255, 212, 137, 0.06);
+        padding: 2px 4px;
+        font-size: 10px;
+        margin-left: 4px;
+        border-radius: 4px;
+    }
+    .list-wrap {
+        .list-item {
+            background: rgba(255, 255, 255, 0.08);
+            padding: 8px 10px;
+            border-radius: 5px;
+            .item-info {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+            .tree-icon {
+                position: relative;
+                .tree-type-name-tag {
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.6);
+                    border-radius: 0 5px 5px 0;
+                    font-size: 10px;
+                    width: 100%;
+                    text-align: center;
+                    padding: 1px;
+                    backdrop-filter: blur(2px);
+                }
+                .tree-img {
+                    width: 63px;
+                    height: 63px;
+                    border-radius: 5px;
+                    object-fit: cover;
+                }
+            }
+            .item-center {
+                flex: 1;
+                padding: 0 12px;
+                color: #fff;
+                .center-t {
+                    font-size: 14px;
+                }
+                .center-item {
+                    color: #6c6c6c;
+                    font-size: 12px;
+                    padding-top: 2px;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        .list-item + .list-item {
+            margin-top: 8px;
+        }
+    }
+    .unit {
+        padding-left: 5px;
+        color: #fff;
+    }
 
+    .apply-wrap {
+        padding-top: 12px;
+        .apply-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(255, 255, 255, 0.04);
+            .apply-users {
+                display: flex;
+                .user-item {
+                    .user-name {
+                        color: #fff;
+                        font-size: 14px;
+                    }
+                }
+                .user-item + .user-item {
+                    padding-left: 6px;
+                }
+            }
+            .apply-time {
+                flex: 1;
+                text-align: center;
+                font-size: 14px;
+                color: #999999;
+            }
+            .apply-btn {
+                padding: 4px 7px;
+                border: 1px solid #FFD489;
+                border-radius: 20px;
+                color: #FFD489;
+                font-size: 12px;
+            }
+        }
+        
+        .apply-item + .apply-item {
+            margin-top: 8px;
+        }
+    }
+    .p-t-2 {
+        padding-top: 2px;
+    }
+}
 </style>

src/views/home/components/tablePopup.vue

@@ -0,0 +1,175 @@
+<template>
+    <Popup v-model:show="showPopup" class="table-popup">
+        <div class="table-content">
+            <el-table :data="tableData" border :span-method="objectSpanMethod">
+                <el-table-column prop="id" label="果树id" />
+                <el-table-column prop="name" label="客户姓名" />
+                <el-table-column prop="value" label="认养斤数" />
+                <el-table-column prop="tel" label="收货电话" />
+                <el-table-column prop="time" label="发货时间" />
+                <el-table-column prop="address" label="收货地址" />
+            </el-table>
+        </div>
+        <div class="table-btn-group">
+            <div class="btn cancel-btn" @click="showPopup = false">取消</div>
+            <div class="btn edit-btn" @click="showPopup = false">保存</div>
+        </div>
+    </Popup>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { ref, watch } from "vue";
+const props = defineProps({
+    showPopupParent: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const showPopup = ref(false);
+
+const tableData = [
+    {
+        id: "BTY-001",
+        name: "陈依依",
+        value: "50",
+        tel: "13855556564",
+        time: "2025.06.15",
+        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
+    },
+    {
+        id: "BTY-001",
+        name: "谢可资",
+        value: "50",
+        tel: "13855556564",
+        time: "2025.06.15",
+        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
+    },
+    {
+        id: "BTY-002",
+        name: "陈五五",
+        value: "50",
+        tel: "13855556564",
+        time: "2025.06.15",
+        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
+    },
+    {
+        id: "BTY-003",
+        name: "黎依依",
+        value: "50",
+        tel: "13855556564",
+        time: "2025.06.15",
+        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
+    },
+    {
+        id: "BTY-003",
+        name: "李依依",
+        value: "50",
+        tel: "13855556564",
+        time: "2025.06.15",
+        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
+    },
+    {
+        id: "BTY-004",
+        name: "潘依依",
+        value: "50",
+        tel: "13855556564",
+        time: "2025.06.15",
+        address: "广东省广州市番禺区小谷谷围街中山大学东校 区116号之五",
+    },
+];
+
+// 预先计算合并信息
+const spanMap = {};
+tableData.forEach((item, index) => {
+    if (!spanMap[item.id]) {
+        spanMap[item.id] = {
+            count: 1,
+            startIndex: index,
+        };
+    } else {
+        spanMap[item.id].count++;
+    }
+});
+
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
+    if (columnIndex === 0) {
+        const id = row.id;
+        if (rowIndex === spanMap[id].startIndex) {
+            return {
+                rowspan: spanMap[id].count,
+                colspan: 1,
+            };
+        } else {
+            return {
+                rowspan: 0,
+                colspan: 0,
+            };
+        }
+    }
+};
+
+watch(
+    () => props.showPopupParent,
+    (newValue, oldValue) => {
+        showPopup.value = !showPopup.value;
+    }
+);
+</script>
+
+<style lang="scss" scoped>
+.table-content {
+    ::v-deep {
+        .el-table {
+            --el-table-border-color: rgba(255, 255, 255, 0.1);
+            --el-table-text-color: #FFFFFF;
+            --el-table-header-text-color: rgba(255, 255, 255, 0.6);
+            --el-table-row-hover-bg-color: transparent;
+            --el-table-current-row-bg-color: transparent;
+            --el-table-header-bg-color: transparent;
+            --el-table-bg-color: rgba(255, 255, 255, 0.04);
+            --el-table-tr-bg-color: transparent;
+        }
+        .el-table tr {
+            background: transparent;
+        }
+        .el-table th.el-table__cell {
+            background: transparent;
+
+        }
+    }
+}
+.table-btn-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 28px;
+    .btn {
+        cursor: pointer;
+        padding: 9px 80px;
+        font-size: 12px;
+        border-radius: 4px;
+        border: 1px solid #ffd489;
+    }
+    .cancel-btn {
+        color: #ffd489;
+    }
+    .edit-btn {
+        background: #ffd489;
+        color: #000000;
+    }
+    .btn + .btn {
+        margin-left: 8px;
+    }
+}
+</style>
+<style lang="less">
+.table-popup {
+    background: #232323;
+    padding: 24px 16px 28px 16px;
+    width: 66%;
+    border: 1px solid #666666;
+    border-radius: 8px;
+}
+</style>

src/views/home/components/treeDetail.vue

@@ -0,0 +1,470 @@
+<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>

src/views/home/homeMap.vue

@@ -155,6 +155,8 @@ const initData = (data) =>{
                 item.type = 'defalutIcon'
             }
 
+            console.log('item', item);
+            eventBus.emit("clickMapPoint", item)
             setTimeout(()=>{
                 mapEventType.value = 'draw'
             },100)

src/views/home/index.vue

@@ -80,6 +80,7 @@ import fnHeader from "@/components/fnHeader.vue";
 import navigation from "@/components/navigation.vue";
 import chartBox from "@/components/chartBox.vue";
 import homePage from "./components/homePage.vue";
+import treeDetail from "./components/treeDetail.vue";
 import adoptList from "./components/adoptList.vue";
 import clientList from "./components/clientList.vue";
 import customMap from "./homeMap.vue";
@@ -94,6 +95,7 @@ import PdfDialog from "../../components/PdfDialog";
 let store = useStore();
 const components = {
     homePage,
+    treeDetail,
 };
 
 const router = useRouter();
@@ -208,6 +210,11 @@ const urls = ref([]);
 const urlsIndex = ref(0);
 
 const currentComponent = ref("homePage");
+
+eventBus.on("clickMapPoint", toggleLeftComponet)
+function toggleLeftComponet() {
+    currentComponent.value = "treeDetail"
+}
 </script>
 
 <style lang="scss" scoped>