fix: 分配果树

src/components/PicturePreview.vue

@@ -25,12 +25,12 @@
               alt=""
               fit="cover"
             /> -->
-              <img
+              <!-- <img
                 class="image no-events"
                 :src="require(`@/assets/images/home/HB-ws0y1menggxv/HB-ws0y1menggxv2025-01-${ele}.jpg`)"
                 alt=""
                 fit="cover"
-              />
+              /> -->
             <div class="watermark-style">
               <div class="left">
                 <div class="region">2区</div>

src/components/fnHeader.vue

@@ -5,6 +5,11 @@
             <span>飞鸟后台管理系统</span>
             <!-- <img class="logo-icon" src="@/assets/images/common/logo-icon.png" alt="" /> -->
         </div>
+        <div class="path-btn">
+            <router-link to="/layout/home" class="nav-item" :class="{ active: isTreeActive }"> 果树管理 </router-link>
+
+            <router-link to="/layout/user" class="nav-item" :class="{ active: isUserActive }"> 用户管理 </router-link>
+        </div>
     </div>
     <!-- 四个方向的阴影 -->
     <div class="page-shadow" v-show="!hideShadow">
@@ -16,7 +21,9 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, computed, ref } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
 
 const props = defineProps({
     hideShadow: {
@@ -24,9 +31,19 @@ const props = defineProps({
         defalut: false,
     },
 });
+const activeNav = computed(() => {
+    return route.meta.nav;
+});
 
-const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
+const isTreeActive = computed(() => {
+    return activeNav.value === "tree";
+});
 
+const isUserActive = computed(() => {
+    return activeNav.value === "user";
+});
+
+const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
 </script>
 
 <style lang="scss" scoped>
@@ -38,35 +55,53 @@ const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
     box-sizing: border-box;
     pointer-events: all;
     position: relative;
-    color: #2199F8;
+    color: #2199f8;
+    background: #fff;
+    &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 10px;
+        z-index: 1;
+        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
+    }
 
     .title {
-      width: 100%;
-      height: 100%;
-      font-size: 24px;
-      letter-spacing: 2px;
-      padding-left: 20px;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    //   background: url("@/assets/images/common/header-bg.png") no-repeat center center / 100% 100%;
-      background: #fff;
-      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
-      .logo {
-        width: 23px;
-        height: 26px;
-      }
-      .logo-icon {
-        width: 33px;
-        height: 12px;
-      }
-      span {
-        margin: 0 5px;
-        cursor: pointer;
-        font-family: "PangMenZhengDao";
-      }
+        width: 100%;
+        height: 100%;
+        font-size: 24px;
+        letter-spacing: 2px;
+        padding-left: 20px;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        //   background: url("@/assets/images/common/header-bg.png") no-repeat center center / 100% 100%;
+
+        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
+        .logo {
+            width: 23px;
+            height: 26px;
+        }
+        .logo-icon {
+            width: 33px;
+            height: 12px;
+        }
+        span {
+            margin: 0 5px;
+            cursor: pointer;
+            font-family: "PangMenZhengDao";
+        }
+    }
+    .path-btn {
+        ::v-deep {
+            .router-link-active {
+                color: yellow;
+            }
+        }
     }
-      .focus-farm {
+    .focus-farm {
         position: absolute;
         right: 192px;
         top: 23px;

src/layout/index.vue

@@ -10,11 +10,7 @@
 
 <script setup>
 import fnHeader from "@/components/fnHeader.vue";
-import { onMounted } from "vue";
 
-onMounted(() => {
-    console.log("oooon");
-});
 </script>
 <style lang="scss" scoped>
 .common-layout {

src/router/mainRoutes.js

@@ -18,13 +18,21 @@ export default [
             {
                 path: "/layout/home",
                 name: "Home",
+                meta: { nav: 'tree' },
                 component: () => import("@/views/home/index.vue"),
             },
             {
                 path: "/layout/user",
                 name: "User",
+                meta: { nav: 'user' },
                 component: () => import("@/views/user/index.vue"),
             },
+            {
+                path: "/layout/customTree",
+                name: "CustomTree",
+                meta: { nav: 'tree' },
+                component: () => import("@/views/customTree/index.vue"),
+            },
         ],
     },
     {
@@ -47,9 +55,4 @@ export default [
         name: "MoreMedal",
         component: () => import("@/views/more/medalPage.vue"),
     },
-    {
-        path: "/customTree",
-        name: "CustomTree",
-        component: () => import("@/views/customTree/index.vue"),
-    },
 ];

src/views/customTree/index.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="base-container">
-        <fnHeader showDate></fnHeader>
         <div class="back-icon" @click="goBack">
             <img src="@/assets/images/common/back-icon.png" />
             返回
@@ -8,10 +7,10 @@
         <div class="custom-content">
             <div class="custom-l">
                 <div class="box-title">
-                    <img src="@/assets/images/common/area-icon.png" alt="" />
+                    <img src="@/assets/images/common/chart-yellow.png" alt="" />
                     选择果树
                 </div>
-                <div class="select-wrap">
+                <div class="select-wrap common-select">
                     <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 146px">
                         <el-option
                             v-for="item in areaOptions"
@@ -52,25 +51,19 @@
                         <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> -->
+                                <!-- <span class="type-tag">综合:94分</span>
+                                <span class="type-tag">生态:92分</span> -->
                             </div>
                             <div class="center-item p-t-2 age-line">
                                 <div class="age-wrap">
                                     <div class="has-age">
-                                        <div class="age">树龄：<span class="unit">5年</span></div>
+                                        <div class="age">栽种时间：<span class="unit">2025.02.15</span></div>
                                     </div>
                                     <div class="sort-line"></div>
                                 </div>
-                                单价：<span class="unit">12元/斤</span>
-                            </div>
-                            <!-- <div class="center-item p-t-2">单价：<span>12元/斤</span></div> -->
-                            <div class="center-item" v-show="ROLE==1">总认养斤数：<span>215斤</span></div>
-                            <div class="center-item progress-wrap" v-show="ROLE==2">
-                                剩余可购：
-                                <el-progress :percentage="60" color="#FFD887"><span class="progress-text"><span class="over">150</span>/215斤</span></el-progress>
+                                树龄：<span class="unit">5年</span>
                             </div>
+                            <div class="center-item">栽种区域：<span>2区</span></div>
                         </div>
                     </div>
                 </div>
@@ -78,65 +71,83 @@
             <div class="custom-r">
                 <div class="second-title">
                     <img src="@/assets/images/common/chart-yellow.png" alt="" />
-                    定制详情
+                    分配详情
                 </div>
                 <div class="custom-detail">
                     <div class="custom-user">
-                        选择客户：
-                        <el-select v-model="selectUser" placeholder="选择客户" style="width: 256px">
-                            <el-option
-                                v-for="item in userOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </div>
-                    <div class="custom-user" v-show="ROLE == 2">
-                        平均斤数：
-                        <el-select v-model="selectNum" placeholder="请选择" style="width: 256px">
-                            <el-option
-                                v-for="item in numOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
-                    </div>
-                    <div class="total" v-show="ROLE == 2">总斤数为<span class="main-unit">250</span>斤</div>
-                    <div class="selected-tree" v-show="selectedItems.length">
-                        <div class="tree-text">{{ ROLE === 1 ? "选择果树：" : "优先分配果树：" }}</div>
-                        <div
-                            class="list-item selected"
-                            @click="removeFromSelected(item)"
-                            v-for="(item, index) in selectedItems"
-                            :key="index"
-                        >
-                            <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 class="user-name">选择客户(15人)</div>
+                        <div class="user-list">
+                            <div class="user-item" v-for="(ele, idx) in visibleItems" :key="idx">
+                                <div class="item-flex">
+                                    <img class="photo" src="@/assets/images/foster-home/image.png" alt="" />
+                                    <div class="item-text">
+                                        <div class="name">
+                                            <span>{{ ele.name }}</span>
+                                            <el-icon class="icon" @click.stop="handlePerson('edit')" color="#2199F8" size="16"
+                                                ><Edit/></el-icon>
+                                        </div>
+                                        <div><span class="item-title">电话：</span>19875236548</div>
+                                        <div><span class="item-title">地址：</span>湖北省武汉市富里唱鑫园5023</div>
+                                    </div>
+                                    <div class="item-icon">
+                                        <el-icon size="24" color="#E04C4C"><CircleCloseFilled /></el-icon>
+                                    </div>
                                 </div>
-                                <div class="center-item p-t-2">单价：<span>12元/斤</span></div>
-                                <div class="center-item">总认养斤数：<span>215斤</span></div>
                             </div>
-                            <div class="item-icon">
-                                <el-icon size="24" color="#E04C4C"><CircleCloseFilled /></el-icon>
+                            <div
+                                v-if="defalutList.length > 3" 
+                                @click="toggleExpand"
+                                class="toggle-btn"
+                                >
+                                {{ isExpanded ? '收起' : `展开` }}
+                                <el-icon :class="['expand-icon', {'up-icon': isExpanded}]"><DArrowRight /></el-icon>
                             </div>
                         </div>
                     </div>
-                    <div class="selected-tips" v-show="selectedItems.length === 0">请在左侧选择 果树列表</div>
-                    <!-- 渐变主色按钮 -->
-                    <div class="btn-group" v-show="selectedItems.length">
-                        <div class="btn cancel-btn">取消</div>
-                        <div class="btn edit-btn">确认定制</div>
+                    <div class="box-line"></div>
+                    <div class="selected-tree">
+                        <div class="user-name">选择果树({{ selectedItems.length }}棵)</div>
+                        <div class="tree-wrap" v-show="selectedItems.length">
+                            <div
+                                class="list-item selected right-tree-list"
+                                @click="removeFromSelected(item)"
+                                v-for="(item, index) in selectedItems"
+                                :key="index"
+                            >
+                                <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> -->
+                                    </div>
+                                    <div class="center-item p-t-2 age-line">
+                                        <div class="age-wrap">
+                                            <div class="has-age">
+                                                <div class="age">栽种时间：<span class="unit">2025.02.15</span></div>
+                                            </div>
+                                            <div class="sort-line"></div>
+                                        </div>
+                                        树龄：<span class="unit">5年</span>
+                                    </div>
+                                    <div class="center-item">栽种区域：<span>2区</span></div>
+                                </div>
+                                <div class="item-icon">
+                                    <el-icon size="24" color="#E04C4C"><CircleCloseFilled /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="selected-tips" v-show="selectedItems.length === 0">请在左侧选择 果树列表</div>
                     </div>
+                    
+                </div>
+                <!-- 渐变主色按钮 -->
+                <div class="btn-group" v-show="selectedItems.length">
+                    <div class="btn cancel-btn">取消</div>
+                    <div class="btn edit-btn">确认分配</div>
                 </div>
             </div>
         </div>
@@ -144,14 +155,11 @@
 </template>
 
 <script setup>
-import fnHeader from "@/components/fnHeader.vue";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
 let store = useStore();
 
-const ROLE = store.state.home.userRole;
-
 const areaVal = ref(0);
 const areaOptions = ref([
     { label: "全区", value: 0 },
@@ -171,20 +179,6 @@ const ageOptions = ref([
     { label: "10-20年", value: 2 },
 ]);
 
-const selectUser = ref(null);
-const userOptions = ref([
-    { label: "张一", value: 1 },
-    { label: "张二", value: 2 },
-    { label: "张三", value: 3 },
-]);
-
-const selectNum = ref(null)
-const numOptions = ref([
-    { label: "25 斤/人", value: 1 },
-    { label: "50 斤/人", value: 2 },
-    { label: "100 斤/人", value: 3 },
-]);
-
 const selectedItems = ref([]);
 function selecteTree(id) {
     if (!selectedItems.value.includes(id)) {
@@ -215,23 +209,69 @@ const router = useRouter();
 function goBack() {
     router.go(-1);
 }
+
+
+const defalutList = ref([
+    {
+        id: "3",
+        name: "周浩",
+        checked: false,
+    },
+    {
+        id: "4",
+        name: "王丽丽",
+        checked: false,
+    },
+
+    {
+        id: "5",
+        name: "李莉",
+        checked: false,
+    },
+    {
+        id: "6",
+        name: "陈林",
+        checked: false,
+    },
+    {
+        id: "7",
+        name: "陈林1",
+        checked: false,
+    },
+    {
+        id: "8",
+        name: "陈林2",
+        checked: false,
+    },
+]);
+
+
+const isExpanded = ref(false);
+
+const visibleItems = computed(() => {
+  return isExpanded.value ? defalutList.value : defalutList.value.slice(0, 3);
+});
+
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
 </script>
 
 <style lang="scss" scoped>
 .base-container {
     width: 100%;
-    height: 100vh;
-    color: #fff;
+    height: 100%;
+    color: rgba(0, 0, 0, 0.9);
     position: relative;
     box-sizing: border-box;
     z-index: 1;
-    background: #000000;
 
     .back-icon {
         position: absolute;
         // left: 405px;
-        left: 485px;
-        top: 38px;
+        right: 503px;
+        top: 30px;
         cursor: pointer;
         margin-right: 20px;
         height: 40px;
@@ -239,9 +279,10 @@ function goBack() {
         align-items: center;
         box-sizing: border-box;
         padding: 0 28px;
-        border: 1px solid rgba(255, 255, 255, 0.6);
-        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.78);
+        background: #2199F8;
         border-radius: 4px;
+        color: #fff;
         img {
             width: 17px;
             margin-right: 10px;
@@ -249,7 +290,7 @@ function goBack() {
     }
     .custom-content {
         width: 100%;
-        height: calc(100% - 74px - 48px);
+        height: calc(100% - 36px);
         display: flex;
         justify-content: space-between;
         box-sizing: border-box;
@@ -257,23 +298,6 @@ function goBack() {
         .select-wrap {
             display: flex;
             align-items: center;
-            ::v-deep {
-                .el-select__wrapper {
-                    background: rgba(255, 212, 137, 0.06);
-                    box-shadow: 0 0 0 1px rgba(255, 212, 137, 0.3) inset;
-                    font-size: 13px;
-                    .el-select__input {
-                        color: #ffd489;
-                    }
-                    .el-select__placeholder {
-                        color: #ffd489;
-                        text-align: center;
-                    }
-                    .el-select__suffix {
-                        color: #ffd489;
-                    }
-                }
-            }
             .select-item + .select-item {
                 margin-left: 5px;
             }
@@ -293,16 +317,16 @@ function goBack() {
             width: calc(100% - 473px);
             height: 100%;
             box-sizing: border-box;
-            border: 1px solid #444444;
-            background: #191919;
+            border: 1px solid rgba(0, 0, 0, 0.2);
             border-radius: 8px;
-            padding: 20px 8px 22px 22px;
+            padding: 14px 10px 22px 10px;
             .box-title {
                 font-size: 22px;
                 display: flex;
-                align-items: flex-end;
+                align-items: center;
                 font-family: "PangMenZhengDao";
                 margin-bottom: 16px;
+                color: #2199F8;
                 img {
                     margin-right: 8px;
                 }
@@ -315,7 +339,7 @@ function goBack() {
             }
         }
         .list-item {
-            background: rgba(255, 255, 255, 0.08);
+            background: rgba(120, 120, 120, 0.05);
             padding: 8px 10px;
             border-radius: 5px;
             width: max-content;
@@ -324,13 +348,17 @@ function goBack() {
             align-items: center;
             margin-right: 8px;
             margin-top: 12px;
-            border: 1px solid transparent;
+            border: 2px solid transparent;
             cursor: pointer;
             width: calc(25% - 8px);
             box-sizing: border-box;
+            color: #FFFFFF;
             &.selected {
-                background: rgba(243, 193, 29, 0.1);
-                border-color: #f2d677;
+                background: rgba(33, 153, 248, 0.1);
+                border-color: #2199F8;
+            }
+            &.right-tree-list {
+                margin-top: 0px;
             }
             .item-info {
                 display: flex;
@@ -344,12 +372,13 @@ function goBack() {
                     left: 0;
                     bottom: 0;
                     background: rgba(0, 0, 0, 0.6);
-                    border-radius: 0 5px 5px 0;
+                    border-radius: 0 0 5px 5px;
                     font-size: 10px;
                     width: 100%;
                     text-align: center;
-                    padding: 1px;
-                    backdrop-filter: blur(2px);
+                    height: 18px;
+                    line-height: 18px;
+                    backdrop-filter: blur(4px);
                 }
                 .tree-img {
                     width: 63px;
@@ -361,7 +390,7 @@ function goBack() {
             .item-center {
                 flex: 1;
                 padding-left: 12px;
-                color: #fff;
+                color: #000000;
                 .center-t {
                     font-size: 14px;
                 }
@@ -370,7 +399,7 @@ function goBack() {
                     font-size: 12px;
                     padding-top: 2px;
                     span {
-                        color: #fff;
+                        color: #000000;
                     }
                     ::v-deep {
                         .el-progress-bar__outer {
@@ -408,6 +437,10 @@ function goBack() {
                 }
             }
         }
+        
+        .right-tree-list + .right-tree-list {
+            margin-top: 12px;
+        }
         .p-t-2 {
             padding-top: 2px;
         }
@@ -416,27 +449,30 @@ function goBack() {
             height: 100%;
             box-sizing: border-box;
             margin-left: 18px;
-            border: 1px solid #444444;
-            background: #191919;
+            border: 1px solid rgba(0, 0, 0, 0.2);
             border-radius: 8px;
             .second-title {
-                background: rgba(255, 255, 255, 0.02);
                 border-radius: 8px 8px 0 0;
-                color: #ffd489;
+                color: #2199F8;
                 font-size: 22px;
                 padding: 14px 12px;
+                font-family: "PangMenZhengDao";
+            }
+            
+            .user-name {
+                font-size: 16px;
+                color: rgba(0, 0, 0, 0.9);
+                padding-bottom: 12px;
+                font-weight: 500;
             }
             .custom-detail {
-                padding: 16px 12px;
-                height: calc(100% - 60px);
+                padding: 0 10px;
+                height: calc(100% - 60px - 60px);
                 box-sizing: border-box;
+                overflow: auto;
                 position: relative;
                 .custom-user {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
                     background: rgba(255, 255, 255, 0.04);
-                    padding: 16px 12px;
                     border-radius: 8px;
                     ::v-deep {
                         .el-select__wrapper {
@@ -455,6 +491,88 @@ function goBack() {
                             }
                         }
                     }
+                    .toggle-btn {
+                        background: #2199F8;
+                        text-align: center;
+                        color: #FFFFFF;
+                        padding: 4px 16px 5px 16px;
+                        width: fit-content;
+                        margin: 12px auto;
+                        border-radius: 20px;
+                        display: flex;
+                        align-items: center;
+                        cursor: pointer;
+                        .expand-icon {
+                            transform: rotate(90deg);
+                            &.up-icon {
+                                transform: rotate(270deg);
+                            }
+                        }
+                    }
+                    .user-item {
+                        border-radius: 6px;
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        background: rgba(33, 153, 248, 0.1);
+                        border: 2px solid #2199F8;
+                        padding: 8px 10px;
+                        &.active {
+                            background: rgba(243, 193, 29, 0.1);
+                            border-color: #ffd489;
+                        }
+                        .checkbox {
+                            margin-right: 12px;
+                        }
+                        .item-flex {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            width: 100%;
+                            .blue-btn {
+                                cursor: pointer;
+                                color: #FFFFFF;
+                                font-size: 12px;
+                                padding: 5px 15px;
+                                border-radius: 20px;
+                                background: #2199F8;
+                            }
+                            .item-icon {
+                                cursor: pointer;
+                            }
+                        }
+                        .photo {
+                            width: 63px;
+                            height: 63px;
+                            border-radius: 8px;
+                            margin-right: 12px;
+                        }
+                        .item-text {
+                            color: #999999;
+                            font-size: 12px;
+                            line-height: 1.6;
+                            flex: 1;
+                            .name {
+                                display: flex;
+                                align-items: center;
+                                span {
+                                    font-size: 14px;
+                                    color: #000000;
+                                    font-weight: 500;
+                                    margin-right: 5px;
+                                }
+                                .icon {
+                                    cursor: pointer;
+                                }
+                            }
+                            .item-title {
+                            color: #666666;
+                            }
+                        }
+                    }
+                    .user-item + .user-item {
+                        margin-top: 12px;
+                    }
                 }
                 .custom-user + .custom-user {
                     margin-top: 12px;
@@ -466,14 +584,19 @@ function goBack() {
             .main-unit {
                 color: #F3C11D;
             }
+            .box-line {
+                width: 100%;
+                height: 1px;
+                background: rgba(0, 0, 0, 0.2);
+            }
             .selected-tree {
                 // display: flex;
-                margin-top: 12px;
+                margin: 12px 0;
                 background: rgba(255, 255, 255, 0.04);
-                padding: 16px 12px;
+                padding: 0px 10px 12px 10px;
                 border-radius: 8px;
-                max-height: calc(100% - 64px - 60px);
-                overflow: auto;
+                // max-height: calc(100% - 64px - 60px);
+                // overflow: auto;
                 box-sizing: border-box;
                 .list-item {
                     width: 100%;
@@ -482,25 +605,27 @@ function goBack() {
                 }
             }
             .selected-tips {
-                background: rgba(243, 193, 29, 0.1);
-                border: 1px solid #f3c11d;
+                background: rgba(33, 153, 248, 0.1);
+                border: 1px solid #2199F8;
                 width: 100%;
                 text-align: center;
                 border-radius: 8px;
                 height: 50px;
                 line-height: 50px;
-                color: #f3c11d;
-                margin-top: 12px;
+                color: #2199F8;
+                box-sizing: border-box;
             }
 
+            .bottom-btn {
+                height: 60px;
+                
+            }
             .btn-group {
                 display: flex;
                 align-items: center;
                 justify-content: end;
-                position: absolute;
-                bottom: 0;
-                right: 0;
-                background: #232323;
+                height: 60px;
+                border-top: 0.5px solid rgba(0, 0, 0, 0.2);
                 width: 100%;
                 padding: 10px 12px;
                 box-sizing: border-box;
@@ -510,14 +635,14 @@ function goBack() {
                     padding: 8px 44px;
                     font-size: 16px;
                     border-radius: 4px;
-                    border: 1px solid #ffd489;
+                    border: 1px solid #2199F8;
                 }
                 .cancel-btn {
-                    color: #ffd489;
+                    color: #2199F8;
                 }
                 .edit-btn {
-                    background: #ffd489;
-                    color: #000000;
+                    background: #2199F8;
+                    color: #fff;
                 }
                 .btn + .btn {
                     margin-left: 12px;

src/views/home/components/adoptList.vue

@@ -24,27 +24,49 @@
         </div>
 
         <div class="many-setting select-wrap" v-show="isManySetting">
-            <el-select class="select-item many-select" v-model="settingType" placeholder="选中设置项" style="width: 96px">
+            <el-select class="select-item many-select" v-model="settingType" placeholder="选中设置项" style="width: 88px">
                 <template #label="{ label, value }">
                     <span v-show="value!=='total'">设置</span>
                     <span>{{ label }}</span>
                 </template>
                 <el-option v-for="(item, index) in settingTypeOptions" :key="index" :label="item.name" :value="item.value" />
             </el-select>
-            <el-input-number
-                style="width: 174px"
-                placeholder="请输入"
-                class="number-input"
-                :controls="false"
-                v-model="unifyPrice"
-                :min="0"
-                @change="setManyPrice"
-            />
-            <span class="unit">{{settingType === "price" ? "元/斤" : settingType === "age" ? "年" : "斤"}}</span>
+            <div v-if="settingType === 'age'">
+                <el-input-number
+                    style="width: 174px"
+                    placeholder="请输入"
+                    class="number-input-setting"
+                    :controls="false"
+                    v-model="batchAge"
+                    :min="0"
+                    @change="setManyPrice"
+                />
+                <span class="setting-unit">年</span>
+            </div>
+            <div v-if="settingType === 'price'">
+                <el-input
+                    style="width: 190px"
+                    placeholder="请输入"
+                    class="number-input-setting"
+                    v-model="batchPrice"
+                    :min="0"
+                    @change="setManyPrice"
+                />
+            </div>
+            <div v-if="settingType === 'total'" class="date-input">
+                <el-date-picker
+                    v-model="batchTotal"
+                    type="date"
+                    format="YYYY.MM.DD"
+                    style="width: 190px"
+                    value-format="YYYY.MM.DD"
+                    placeholder="栽种时间"
+                />
+            </div>
         </div>
 
         <div class="list-wrap">
-            <div class="list-item" v-for="(item, index) in displayedAdoptList" :key="index">
+            <div class="list-item" v-for="(item, index) in adoptList" :key="index">
                 <div class="list-info">
                     <div class="tree-icon">
                         <div class="tree-tag" v-show="item.status === 0">未守护</div>
@@ -59,8 +81,6 @@
                             <!-- <span class="type-tag">综合:{{item.zh||94}}分</span>
                             <span class="type-tag">生态:{{item.st||92}}分</span> -->
                         </div>
-                        <!-- 批量设置栽种时间 -->
-                        <div class="center-item" v-show="isManySetting && settingType !== 'price'">栽种时间：<span class="unit">{{item.time}}</span></div>
                         
                         <!-- 批量设置树龄或单项设置 -->
                         <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'age') || item.settingPrice">
@@ -78,15 +98,17 @@
                             </div>
                             树龄：<span class="unit"><span class="unit">{{item.age||12}}年</span></span>
                         </div>
-                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
-                            <span class="edit-label">单价：</span>
-                            <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.price" :min="0" />
-                            <span class="unit">元/斤</span>
-                        </div>
-                        <div class="center-item" v-show="isManySetting && settingType !== 'age'">树龄：<span class="unit">{{item.age||5}}年</span></div>
-                        <div class="center-item" v-show="(isManySetting && settingType !== 'total')">栽种时间：<span class="unit">{{item.time}}</span></div>
+                        <div class="center-item" v-show="isManySetting && settingType !== 'age'"><span class="edit-label">树龄：</span><span class="unit">{{item.age||5}}年</span></div>
+                        <div class="center-item edit-item" v-show="isManySetting && settingType !== 'price'"><span class="edit-label">品种：</span><span class="unit">{{item.pz}}</span></div>
                         
-                        <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
+                        <div class="center-item p-t-2 has-input edit-item" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
+                            <span class="edit-label">品种：</span>
+                            <el-input @change="settingSinglePrice" style="width: 140px" class="number-input" v-model="item.pz" />
+                        </div>
+
+                        <div class="center-item" v-show="(isManySetting && settingType !== 'total')"><span class="edit-label">栽种时间：</span><span class="unit">{{item.time}}</span></div>
+
+                        <div class="center-item p-t-2 has-input date-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
                             <span class="edit-label">栽种时间：</span>
                             <!-- <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.total" :min="0" /> -->
                             <el-date-picker
@@ -199,15 +221,17 @@ const displayedAdoptList = ref([...adoptList.value]); // 初始时显示完整
 
 onMounted(() => {});
 
-// 批量定价
-const unifyPrice = ref(null);
+// 批量设置
+const batchAge = ref(null);
+const batchPrice = ref(null);
+const batchTotal = ref(null);
 const isManySetting = ref(false);
 const settingTypeOptions = [
     {name: "树龄", value: "age"},
     {name: "品种", value: "price"},
     {name: "栽种时间", value: "total"},
 ]
-const settingType = ref("price")
+const settingType = ref("age")
 function manySetPrice() {
     isManySetting.value = true;
     displayedAdoptList.value = adoptList.value.filter((item) => item.status === 0);
@@ -284,7 +308,7 @@ function settingSinglePrice() {
         padding: 12px 0;
         .list-item {
             background: rgba(120, 120, 120, 0.05);
-            padding: 8px 10px;
+            padding: 8px 16px 8px 10px;
             border-radius: 5px;
             .list-info {
                 display: flex;
@@ -355,6 +379,9 @@ function settingSinglePrice() {
                     font-size: 12px;
                     padding-top: 2px;
                 }
+                .edit-item {
+                    padding: 6px 0;
+                }
 
                 .user-wrap {
                     color: #F0AC37;
@@ -404,6 +431,9 @@ function settingSinglePrice() {
                     .unit {
                         padding-left: 5px;
                     }
+                    &.edit-item {
+                        padding: 6px 0;
+                    }
                 }
                 .small-btn-group {
                   display: flex;
@@ -420,26 +450,45 @@ function settingSinglePrice() {
         color: #000000;
     }
     .many-setting {
-        background: rgba(255, 212, 137, 0.08);
-        border: 1px solid rgba(255, 212, 137, 0.3);
-        border-radius: 6px;
-        color: #ffd489;
+        background: rgba(33, 153, 248, 0.1);
+        border: 1px solid #2199F8;
+        border-radius: 5px;
+        color: #2199F8;
         padding: 12px 8px;
-        margin-top: 12px;
-        .many-select {
-            ::v-deep {
+        margin: 12px 8px 0 12px;
+        color: #0064B3;
+        ::v-deep {
+            .many-select {
+                margin-right: 10px;
                 .el-select__wrapper {
                     padding: 4px;
                     box-shadow: none;
+                    background: none;
+                }
+                .el-select__placeholder, .el-select__caret {
+                    color: #0064B3;
                 }
             }
+            .number-input-setting {
+                .el-input__wrapper {
+                    box-shadow: 0 0 0 1px #2199F8 inset;
+                    border-radius: 6px;
+                }
+                .el-input__inner, .el-input__inner::placeholder {
+                    color: #2199F8;
+                    text-align: center;
+                }
+            }
+        }
+        .setting-unit {
+            padding-left: 10px;
         }
     }
     .number-input {
-        margin: 0 12px;
+        // margin: 0 12px;
         ::v-deep {
-            &.el-input-number {
-                width: 80px;
+            &.el-input-number, &.el-input {
+                width: 90px;
                 background: rgba(33, 153, 248, 0.08);
                 border: 1px solid #2199F8;
                 border-radius: 5px;
@@ -451,8 +500,25 @@ function settingSinglePrice() {
             .el-input-number.is-without-controls .el-input__wrapper {
                 padding: 0 8px;
             }
-            .el-input__inner {
+            .el-input__inner, .el-input__inner::placeholder {
                 color: #2199F8;
+                text-align: center;
+            }
+        }
+    }
+    .date-input {
+        ::v-deep {
+            .el-date-editor {
+                .el-input__wrapper {
+                    background: rgba(33, 153, 248, 0.08);
+                    box-shadow: 0 0 0 1px #2199F8 inset;
+                }
+                .el-input__inner, .el-input__inner::placeholder {
+                    color: #2199F8;
+                }
+                .el-input__prefix {
+                    color: #2199F8;
+                }
             }
         }
     }

src/views/home/components/clientList.vue

@@ -1,319 +1,141 @@
 <template>
     <div class="list-wrap">
-        <div class="list-header">
-            <el-input class="search" v-model="input" placeholder="搜索">
-                <template #prefix>
-                    <el-icon><search /></el-icon>
-                </template>
-            </el-input>
-            <div class="button" @click="handlePerson('add')">
-                <img src="@/assets/images/foster-home/firend-icon.png" alt="" />
-                新增客户
-            </div>
-        </div>
-        <div class="list-content" :class="{'max-height':!isManage}">
-            <collapse v-model="activeNames">
-                <collapse-item :name="index" v-for="(item, index) in list" :key="index" :is-link="false">
-                    <template #title>
-                        <el-icon class="icon"><CaretRight /></el-icon>
-                        {{ item.name }}
-                        <span class="span">{{ item.children.length }}</span>
-                    </template>
-                    <template #value>
-                        <div @click.stop="hadnleManage(item,index)" class="text">{{isManage?'管理':'取消管理'}}</div>
-                    </template>
-                    <div class="list-item" :class="{active:ele.checked}" v-for="(ele, idx) in item.children" :key="idx + ele.id">
-                      <checkbox class="checkbox" @change="changeCheck" v-show="setingShow" v-model="ele.checked"></checkbox>
-                        <div class="item-flex">
-                            <img class="photo" src="@/assets/images/foster-home/image.png" alt="" />
-                            <div class="item-text">
-                                <div class="name">
-                                    <span>{{ ele.name }}</span>
-                                    <el-icon class="icon" @click.stop="handlePerson('edit')" color="#FFD489" size="16" ><Edit /></el-icon>
-                                </div>
-                                <div>电话：19875236548</div>
-                                <div>地址：湖北省武汉市富里唱鑫园5023</div>
-                            </div>
+        <div class="list-content">
+            <div class="list-item" v-for="(ele, idx) in defalutList" :key="idx">
+                <div class="item-flex">
+                    <img class="photo" src="@/assets/images/foster-home/image.png" alt="" />
+                    <div class="item-text">
+                        <div class="name">
+                            <span>{{ ele.name }}</span>
+                            <el-icon class="icon" @click.stop="handlePerson('edit')" color="#2199F8" size="16"
+                                ><Edit/></el-icon>
                         </div>
+                        <div><span class="item-title">电话：</span>19875236548</div>
+                        <div><span class="item-title">地址：</span>湖北省武汉市富里唱鑫园5023</div>
                     </div>
-                </collapse-item>
-            </collapse>
-        </div>
-        <div class="list-footer">
-          <div class="settings" v-show="!isSetting && isManage" @click="handleGroup">新增分组</div>
-          <div class="settings" v-show="!isSetting && !isManage" @click="handleSetting">批量设置</div>
-          <div class="operation flex" v-show="isSetting && !setingShow">
-            <div class="delete" @click="handleDelete">删除分组</div>
-            <div class="btn-group flex">
-              <div class="add" @click="handleAdd">添加</div>
-              <div class="remove" @click="handleRemove">移除</div>
+                    <div class="blue-btn">去分配</div>
+                </div>
             </div>
-          </div>
-          <div class="controls flex" v-show="isSetting && setingShow">
-            <div class="personnel flex">
-              <div class="circle flex" v-show="filterList.length"><el-icon color="#000" size="11"><ArrowUpBold /></el-icon></div>
-              <div class="text van-ellipsis">
-                <template v-for="(item,index) in filterList" :key="index">
-                  {{item.name}}<span v-show="filterList.length - 1 !== index">/</span>
-                </template>
-              </div>
-            </div>
-            <div class="delete" @click="handleGroup" v-show="listType==='other'">设置分组</div>
-            <div class="delete" @click="handleOperation" v-show="listType!=='other'">{{operationType==='add'?'添加':'移出'}}({{filterList.length}})</div>
-          </div>
         </div>
+        
+        <!-- 渐变主色按钮 -->
+        <div class="center-btn" @click="toCustomPage">一键分配</div>
     </div>
-  <!-- 添加分组 -->
-  <popup v-model:show="showGroup" closeable round class="popup-custom" :close-on-click-overlay="false">
-    <div class="popup-title">添加分组</div>
-    <div class="popup-content">
-      <el-input class="input" v-model="inputVal" size="large" placeholder="请输入名称" />
-    </div>
-    <div class="popup-footer">
-      <div class="cancel" @click="handleCancel">取消</div>
-      <div @click="handleAddGroup">添加</div>
-    </div>
-  </popup>
-  <!-- 新增客户、编辑客户 -->
-  <popup v-model:show="showClient" closeable round class="popup-custom" :close-on-click-overlay="false">
-    <div class="popup-title">{{typePopup==='add'?'新增客户':'编辑客户'}}</div>
-    <div class="popup-content">
-      <el-form
-        ref="ruleFormRef"
-        :model="ruleForm"
-        :rules="rules"
-        label-width="auto"
-        class="rule-form"
-        size="large"
-      >
-        <el-form-item label="姓名" prop="name">
-          <el-input class="input" v-model="ruleForm.name" size="large" placeholder="请输入姓名" />
-        </el-form-item>
-        <el-form-item label="电话" prop="tel">
-          <el-input class="input" v-model="ruleForm.tel" size="large" placeholder="请输入电话号码" />
-        </el-form-item>
-        <el-form-item label="地址" prop="adress">
-          <el-input class="input" v-model="ruleForm.adress" size="large" placeholder="请输入地址" />
-        </el-form-item>
-        <el-form-item label="头像" prop="photo">
-          <!-- <upload></upload> -->
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="popup-footer">
-      <div class="cancel" @click="resetForm">取消</div>
-      <div @click="submitForm">添加</div>
-    </div>
-  </popup>
+    <!-- 新增客户、编辑客户 -->
+    <popup v-model:show="showClient" closeable round class="popup-custom">
+        <div class="popup-title">{{ typePopup === "add" ? "新增客户" : "编辑客户" }}</div>
+        <div class="popup-content">
+            <el-form
+                ref="ruleFormRef"
+                :model="ruleForm"
+                :rules="rules"
+                label-width="auto"
+                class="rule-form"
+                size="large"
+            >
+                <el-form-item label="姓名" prop="name">
+                    <el-input class="input" v-model="ruleForm.name" size="large" placeholder="请输入姓名" />
+                </el-form-item>
+                <el-form-item label="电话" prop="tel">
+                    <el-input class="input" v-model="ruleForm.tel" size="large" placeholder="请输入电话号码" />
+                </el-form-item>
+                <el-form-item label="地址" prop="adress">
+                    <el-input class="input" v-model="ruleForm.adress" size="large" placeholder="请输入地址" />
+                </el-form-item>
+                <el-form-item label="头像" prop="photo">
+                    <!-- <upload></upload> -->
+                </el-form-item>
+            </el-form>
+        </div>
+        <div class="popup-footer">
+            <div class="cancel" @click="resetForm">取消</div>
+            <div @click="submitForm">添加</div>
+        </div>
+    </popup>
 </template>
 
 <script setup>
-import { ref,reactive } from "vue";
-import { Collapse, CollapseItem,Checkbox,Popup,showConfirmDialog } from "vant";
+import { ref, reactive } from "vue";
+import { Collapse, CollapseItem, Checkbox, Popup, showConfirmDialog } from "vant";
 import { useRouter } from "vue-router";
-import { ElMessage } from 'element-plus'
+import { ElMessage } from "element-plus";
 import { deepClone } from "@/common/commonFun";
 import upload from "@/components/common/upload.vue";
 const router = useRouter();
 
-//新建分组
-const showGroupPopup = ref(false);
-const showPopup = () => {
-  showGroupPopup.value = true;
-};
-const input = ref("");
-const distributionShow = ref(false);
-
-// 果树选中的监听事件
-const checkedList = ref([])
-const changeActive = (arr) =>{
-  checkedList.value = arr
-}
-
-const isManage = ref(true)
 // const curIndex = ref(0)
-const listType = ref('')
-// 管理
-const hadnleManage = (value,index) => {
-  // console.log('val',value);
-  listType.value = 'often'
-  isSetting.value = true
-  if(value.name==='未分组列表'){
-    listType.value = 'other'
-    isSetting.value = false
-  }
-  // curIndex.value = index
-  isManage.value = !isManage.value
-  if(!isManage.value){
-    list.value = deepClone([defalutList.value[index]])
-  }else{
-    resetList()
-  }
-};
-
-const resetList = () =>{
-  
-  list.value = deepClone(defalutList.value)
-  setingShow.value = false
-  isSetting.value = false
-  isManage.value = true
-}
-
-const isSetting = ref(false)
-//设置
-const handleSetting = () =>{
-  isSetting.value = true
-  if(listType.value==='other'){
-    setingShow.value = true
-  }
-}
-
-const operationType = ref('')
-//添加
-const handleAdd = () =>{
-  operationType.value = 'add'
-  setingShow.value = true
-}
-
-//移除
-const setingShow = ref(false)
-const handleRemove = () =>{
-  operationType.value = 'remove'
-  setingShow.value = true
-}
-
-const filterList = ref([]);
-const changeCheck = () =>{
-  filterList.value = list.value[0].children.filter((item) => item.checked);
-}
-
-//设置分组
-const showGroup = ref(false)
-const inputVal = ref('')
-const handleGroup = () =>{
-  // if(filterList.value.length<1) return ElMessage.warning('请选择用户')
-  showGroup.value = true
-}
-
-//添加分组
-const handleAddGroup = () =>{
-  if(inputVal.value.length<1) return ElMessage.warning('请输入名称')
-  handleCancel()
-  ElMessage.success('添加成功')
-}
-const handleCancel = () =>{
-  showGroup.value = false
-  inputVal.value = ''
-}
-
-//删除分组
-const handleDelete = () =>{
-  showConfirmDialog({
-    title: '提示',
-    message:'是否删除该分组！',
-  })
-  .then(() => {
-    // on confirm
-  })
-  .catch(() => {
-    // on cancel
-  });
-}
-
 //新增客户
-const typePopup = ref('')
-const handlePerson = (type) =>{
-  typePopup.value = type
-  showClient.value = true
-}
+const typePopup = ref("");
+const handlePerson = (type) => {
+    typePopup.value = type;
+    showClient.value = true;
+};
 
-//移出、添加
-const handleOperation = () =>{
-  if(filterList.value.length<1) return ElMessage.warning('请选择用户')
-  if(operationType.value === 'add'){
-    ElMessage.success('添加成功')
-  }else{
-    ElMessage.success('移出成功')
-  }
-  resetList()
-}
 
-const showClient = ref(false)
+const showClient = ref(false);
 const ruleForm = reactive({
-  name:'',
-  tel:'',
-  adress:''
-})
+    name: "",
+    tel: "",
+    adress: "",
+});
 const rules = reactive({
-  name: { required: true, message: '请输入用户名称', trigger: ['blur','change'] },
-  tel: { required: true, message: '请输入电话号码', trigger: ['blur','change'] },
-})
+    name: { required: true, message: "请输入用户名称", trigger: ["blur", "change"] },
+    tel: { required: true, message: "请输入电话号码", trigger: ["blur", "change"] },
+});
 
-const ruleFormRef = ref(null)
-const submitForm = async () =>{
-  if (!ruleFormRef.value) return
-  await ruleFormRef.value.validate((valid, fields) => {
-    if (valid) {
-      ElMessage.success('添加成功')
-      showClient.value = false
-    } else {
-      console.log('error submit!')
-    }
-  })
-}
+const ruleFormRef = ref(null);
+const submitForm = async () => {
+    if (!ruleFormRef.value) return;
+    await ruleFormRef.value.validate((valid, fields) => {
+        if (valid) {
+            ElMessage.success("添加成功");
+            showClient.value = false;
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
 
-const resetForm = () =>{
-  if (!ruleFormRef.value) return
-  ruleFormRef.value.resetFields()
-  showClient.value = false
-}
+const resetForm = () => {
+    if (!ruleFormRef.value) return;
+    ruleFormRef.value.resetFields();
+    showClient.value = false;
+};
 
 const defalutList = ref([
     {
-        name: "常用列表",
-        id: "1",
-        isGroup: 0,
-        children: [
-            {
-                id: "3",
-                name: "周浩",
-                checked: false,
-            },
-            {
-                id: "4",
-                name: "王丽丽",
-                checked: false,
-            },
-        ],
+        id: "3",
+        name: "周浩",
+        checked: false,
     },
     {
-        name: "未分组列表",
-        id: "2",
-        isGroup: 1,
-        children: [
-            {
-                id: "5",
-                name: "李莉",
-                checked: false,
-            },
-            {
-                id: "6",
-                name: "陈林",
-                checked: false,
-            },
-        ],
+        id: "4",
+        name: "王丽丽",
+        checked: false,
     },
-])
-const list = ref(deepClone(defalutList.value));
 
-const activeNames = ref([0]);
+    {
+        id: "5",
+        name: "李莉",
+        checked: false,
+    },
+    {
+        id: "6",
+        name: "陈林",
+        checked: false,
+    },
+]);
 
+function toCustomPage() {
+    router.push("/layout/customTree");
+}
 </script>
 
 <style lang="scss" scoped>
 .list-wrap {
     width: 100%;
     height: 100%;
+    position: relative;
     .list-header {
         display: flex;
         align-items: center;
@@ -336,7 +158,7 @@ const activeNames = ref([0]);
         }
         .button {
             width: calc(100% - 100px);
-            color: #FFD489;
+            color: #ffd489;
             background: rgba(255, 212, 137, 0.06);
             border: 1px solid rgba(255, 212, 137, 0.3);
             display: flex;
@@ -354,18 +176,19 @@ const activeNames = ref([0]);
     }
     .list-content {
         width: 100%;
-        height: calc(100% - 50px);
-        margin-top: 12px;
-        &.max-height{
-          height: calc(100% - 50px - 55px);
+        height: 100%;
+        &.max-height {
+            height: calc(100% - 50px - 55px);
         }
         .text {
-            color: #FFD489;
+            color: #ffd489;
             cursor: pointer;
         }
         ::v-deep {
-            .van-cell:after,.van-collapse-item--border:after,.van-hairline--top-bottom:after{
-              border: none !important;
+            .van-cell:after,
+            .van-collapse-item--border:after,
+            .van-hairline--top-bottom:after {
+                border: none !important;
             }
             .van-cell {
                 border-radius: 5px 5px 0 0;
@@ -389,9 +212,9 @@ const activeNames = ref([0]);
                     }
                 }
             }
-            .van-collapse-item__content{
-              background: transparent;
-              padding: 10px 0 0 0;
+            .van-collapse-item__content {
+                background: transparent;
+                padding: 10px 0 0 0;
             }
             .van-collapse-item__title--expanded {
                 .van-cell__title {
@@ -404,10 +227,10 @@ const activeNames = ref([0]);
                 margin-top: 12px;
             }
 
-            .van-checkbox__icon--checked .van-icon{
-              background-color: #F7BE5A;
-              border-color: #F7BE5A;
-              color: #000;
+            .van-checkbox__icon--checked .van-icon {
+                background-color: #f7be5a;
+                border-color: #f7be5a;
+                color: #000;
             }
         }
         .list-item {
@@ -415,23 +238,33 @@ const activeNames = ref([0]);
             position: relative;
             display: flex;
             align-items: center;
-            background: rgba(255, 255, 255, 0.08);
+            background: rgba(120, 120, 120, 0.05);
             border: 1px solid transparent;
             padding: 8px 10px;
-            &.active{
-              background: rgba(243, 193, 29, 0.1);
-              border-color: #FFD489;
+            &.active {
+                background: rgba(243, 193, 29, 0.1);
+                border-color: #ffd489;
             }
-            .checkbox{
-              margin-right: 12px;
+            .checkbox {
+                margin-right: 12px;
             }
             .item-flex {
                 display: flex;
                 align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                .blue-btn {
+                  cursor: pointer;
+                  color: #FFFFFF;
+                  font-size: 12px;
+                  padding: 5px 15px;
+                  border-radius: 20px;
+                  background: #2199F8;
+                }
             }
             .photo {
-                width: 68px;
-                height: 68px;
+                width: 63px;
+                height: 63px;
                 border-radius: 8px;
                 margin-right: 12px;
             }
@@ -439,150 +272,171 @@ const activeNames = ref([0]);
                 color: #999999;
                 font-size: 12px;
                 line-height: 1.6;
+                flex: 1;
                 .name {
                     display: flex;
                     align-items: center;
                     span {
-                        font-size: 15px;
-                        color: #FFFFFF;
+                        font-size: 14px;
+                        color: #000000;
                         font-weight: 500;
                         margin-right: 5px;
                     }
-                    .icon{
-                      cursor: pointer;
+                    .icon {
+                        cursor: pointer;
                     }
                 }
+                .item-title {
+                  color: #666666;
+                }
             }
         }
         .list-item + .list-item {
             margin-top: 12px;
         }
     }
-    .list-footer{
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      background: rgba(255, 255, 255, 0.08);
-      display: flex;
-      justify-content: center;
-      box-sizing: border-box;
-      padding: 11px;
-      .settings{
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        padding: 8px 36px;
-        color: #fff;
-        cursor: pointer;
-      }
-      .flex{
-        display: flex;
-        align-items: center;
-      }
-      .delete{
-        border: 1px solid #FFD489;
-        border-radius: 4px;
-        padding: 8px 19px;
-        color: #FFD489;
+    
+    .center-btn {
+        position: absolute;
+        bottom: 64px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #FFFFFF;
+        border-radius: 20px;
+        font-size: 14px;
+        padding: 7px 10px;
         cursor: pointer;
-      }
-      .operation{
+        border: 1px solid #fff;
+        background: linear-gradient(180deg, #84C9FF, #2199F8);
+        width: 194px;
+        box-sizing: border-box;
+        text-align: center;
+    }
+    .list-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
         width: 100%;
-        justify-content: space-between;
-        .btn-group{
-          div{
+        background: rgba(255, 255, 255, 0.08);
+        display: flex;
+        justify-content: center;
+        box-sizing: border-box;
+        padding: 11px;
+        .settings {
             background: rgba(255, 255, 255, 0.1);
-            padding: 8px 19px;
             border-radius: 4px;
+            padding: 8px 36px;
+            color: #fff;
             cursor: pointer;
-          }
-          .add{
-            margin-right: 10px;
-          }
         }
-      }
-      .controls{
-        width: 100%;
-        justify-content: space-between;
-        .personnel{
-          width: calc(100% - 100px);
-          .circle{
-            width: 16px;
-            height: 16px;
-            background: #FFD489;
-            border-radius: 50%;
-            justify-content: center;
-            margin-right: 8px;
-          }
-          .text{
-            width: 90%;
-          }
+        .flex {
+            display: flex;
+            align-items: center;
+        }
+        .delete {
+            border: 1px solid #ffd489;
+            border-radius: 4px;
+            padding: 8px 19px;
+            color: #ffd489;
+            cursor: pointer;
+        }
+        .operation {
+            width: 100%;
+            justify-content: space-between;
+            .btn-group {
+                div {
+                    background: rgba(255, 255, 255, 0.1);
+                    padding: 8px 19px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                }
+                .add {
+                    margin-right: 10px;
+                }
+            }
         }
-        .delete{
-          background: #FFD489;
-          color: #000;
-          width: 85px;
-          box-sizing: border-box;
-          text-align: center;
-          padding: 8px;
+        .controls {
+            width: 100%;
+            justify-content: space-between;
+            .personnel {
+                width: calc(100% - 100px);
+                .circle {
+                    width: 16px;
+                    height: 16px;
+                    background: #ffd489;
+                    border-radius: 50%;
+                    justify-content: center;
+                    margin-right: 8px;
+                }
+                .text {
+                    width: 90%;
+                }
+            }
+            .delete {
+                background: #ffd489;
+                color: #000;
+                width: 85px;
+                box-sizing: border-box;
+                text-align: center;
+                padding: 8px;
+            }
         }
-      }
     }
 }
-.popup-custom{
-  // width: 24%;
-  width: 504px;
-  padding: 31px 25px;
-  box-sizing: border-box;
-  background: #232323;
-  ::v-deep{
-    .van-popup__close-icon{
-      color: #FFFFFF;
-    }
-  }
-  .popup-title{
-    text-align: center;
-    color: #FFFFFF;
-    font-size: 24px;
-    margin-bottom: 15px;
-  }
-  .popup-content{
-    width: 100%;
+.popup-custom {
+    // width: 24%;
+    width: 504px;
+    padding: 31px 25px;
+    box-sizing: border-box;
+    background: #232323;
     ::v-deep {
-      .el-form-item__label {
-        color: rgba(255, 255, 255, 0.4);
-      }
-      .el-input__wrapper {
-        background: transparent;
-        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46) inset;
-      }
+        .van-popup__close-icon {
+            color: #ffffff;
+        }
     }
-    .input{
-      height: 46px;
-      font-size: 16px;
+    .popup-title {
+        text-align: center;
+        color: #ffffff;
+        font-size: 24px;
+        margin-bottom: 15px;
     }
-  }
-  .popup-footer{
-    width: 100%;
-    display: flex;
-    border-top: 1px solid rgba(0, 0, 0,0.1);
-    margin-top: 30px;
-    padding-top: 25px;
-    div{
-      flex: 1;
-      background: linear-gradient(120deg,#FFD887,#ED9E1E);
-      border-radius: 6px;
-      padding: 13px;
-      font-size: 20px;
-      color: #fff;
-      text-align: center;
-      cursor: pointer;
+    .popup-content {
+        width: 100%;
+        ::v-deep {
+            .el-form-item__label {
+                color: rgba(255, 255, 255, 0.4);
+            }
+            .el-input__wrapper {
+                background: transparent;
+                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46) inset;
+            }
+        }
+        .input {
+            height: 46px;
+            font-size: 16px;
+        }
     }
-    .cancel{
-      color: #000;
-      background: #F3F3F3;
-      margin-right: 30px;
+    .popup-footer {
+        width: 100%;
+        display: flex;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        margin-top: 30px;
+        padding-top: 25px;
+        div {
+            flex: 1;
+            background: linear-gradient(120deg, #ffd887, #ed9e1e);
+            border-radius: 6px;
+            padding: 13px;
+            font-size: 20px;
+            color: #fff;
+            text-align: center;
+            cursor: pointer;
+        }
+        .cancel {
+            color: #000;
+            background: #f3f3f3;
+            margin-right: 30px;
+        }
     }
-  }
 }
 </style>

src/views/home/index.vue

@@ -8,7 +8,7 @@
 
             <div class="right yes-events">
                 <div class="list adopt-list-wrap">
-                    <chart-box name="认养管理" arrow="" color="yellow">
+                    <chart-box name="果树管理" arrow="" color="yellow">
                         <el-tabs v-model="activeName" class="demo-tabs">
                             <el-tab-pane label="果树列表" name="果树列表">
                                 <adopt-list></adopt-list>
@@ -243,7 +243,7 @@ function backHome() {
         .left,
         .right {
             width: 376px;
-            height: 100%;
+            height: calc(100% - 10px);
             margin-top: 10px;
             box-sizing: border-box;
             display: flex;