feat:修改用户管理页面UI和农事方案页面

src/App.vue

@@ -21,7 +21,7 @@
     </router-view>
 
     <Tabbar class="tabbar" route fixed v-show="showTab" active-color="#2199F8" inactive-color="#898989">
-        <tabbar-item replace to="/home" v-if="curRole == 0">
+        <tabbar-item replace to="/home" v-if="curRole == 0 || curRole == 2">
             <span>首页</span>
             <template #icon="props">
                 <img
@@ -138,7 +138,7 @@ const router = useRouter();
 // 首页loading加载完才显示底部导航栏
 const showTab = ref(false);
 // 0: 农户, 1: 专家, 2:农资农服
-const curRole = ref(0);
+const curRole = ref(2);
 
 let tabBarHeight = 0;
 onMounted(() => {

src/components/chatWindow.vue

@@ -548,13 +548,13 @@ const functionButtons = ref([
             router.push(`/farm_card?farmId=${farmVal.value}`);
         }
     },
-    {
-        text: '农场相册',
-        handler: () => {
-            // 跳转到农场相册页面
-            router.push(`/farm_photo`);
-        }
-    }
+    // {
+    //     text: '农场相册',
+    //     handler: () => {
+    //         // 跳转到农场相册页面
+    //         router.push(`/farm_photo`);
+    //     }
+    // }
 ]);
 
 // 辅助函数

src/components/pageComponents/FarmInfoCard.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="farm-info-card" :class="{ 'has-footer': showFooter }" @click="handleClick">
+        <div class="item-content">
+            <div class="item-left">
+                <img class="map-img" :src="data.mapImage || '/map.png'" alt="地图" />
+                <div class="item-info">
+                    <div class="item-header">
+                        <div class="farm-name">{{ data.farmName }}</div>
+                        <div class="tags">
+                            <span class="tag tag-area">{{ data.area }}</span>
+                            <span class="tag tag-variety">{{ data.variety }}</span>
+                        </div>
+                    </div>
+                    <div class="farm-address">{{ data.address }}</div>
+                </div>
+            </div>
+            <!-- 右侧按钮插槽 -->
+            <div v-if="hasRightSlot" class="item-right-btn" @click.stop>
+                <slot name="right"></slot>
+            </div>
+        </div>
+        <!-- 底部内容：服务次数或自定义内容 -->
+        <div v-if="showFooter" class="item-footer">
+            <slot name="footer">
+                <template v-if="data.serviceCount !== undefined">
+                    农事服务过<span class="service-count">{{ data.serviceCount }}</span
+                    >次
+                    <span class="view-detail">查看详情</span>
+                </template>
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        required: true,
+        validator: (value) => {
+            return (
+                value.farmName !== undefined &&
+                value.area !== undefined &&
+                value.variety !== undefined &&
+                value.address !== undefined
+            );
+        },
+    },
+});
+
+const emit = defineEmits(["click"]);
+const slots = useSlots();
+
+const showFooter = computed(() => {
+    return props.data.serviceCount !== undefined || !!slots.footer;
+});
+
+const hasRightSlot = computed(() => {
+    return !!slots.right;
+});
+
+const handleClick = () => {
+    emit("click", props.data);
+};
+</script>
+
+<style lang="scss" scoped>
+.farm-info-card {
+    background: #fff;
+    border-radius: 8px;
+    position: relative;
+
+    &.has-footer {
+        padding: 12px 10px;
+        border-radius: 5px;
+    }
+
+    &:not(.has-footer) {
+        padding: 16px 12px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .item-content {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .map-img {
+            width: 40px;
+            height: 40px;
+            border-radius: 6px;
+            object-fit: cover;
+        }
+        .item-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .item-info {
+            .item-header {
+                display: flex;
+                gap: 10px;
+                font-size: 14px;
+                margin-bottom: 4px;
+                .farm-name {
+                    font-weight: 600;
+                    color: #000;
+                }
+                .tags {
+                    display: flex;
+                    gap: 6px;
+                    .tag {
+                        padding: 1px 8px;
+                        border-radius: 2px;
+                        font-size: 12px;
+                        &.tag-area {
+                            background: #f4f4f4;
+                            color: #1d2129;
+                        }
+
+                        &.tag-variety {
+                            background: rgba(232, 243, 255, 1);
+                            color: #2199f8;
+                        }
+                    }
+                }
+            }
+            .farm-address {
+                font-size: 12px;
+                color: #86909c;
+            }
+        }
+    }
+
+    .item-footer {
+        background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, transparent 100%);
+        padding: 6px 8px;
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+        margin-top: 10px;
+        color: #2e2e2e;
+        font-size: 12px;
+        span {
+            color: #2199f8;
+            font-weight: 500;
+        }
+        .service-count {
+            margin: 0 2px;
+        }
+        .view-detail {
+            margin-left: 10px;
+        }
+    }
+
+    .item-right-btn {
+        text-align: center;
+        color: #888b8d;
+        font-size: 12px;
+        padding: 5px 12px;
+        border-radius: 20px;
+        border: 1px solid #888b8d;
+    }
+}
+
+.farm-info-card + .farm-info-card {
+    margin-top: 12px;
+}
+</style>

src/views/old_mini/mine/pages/serviceDetail.vue

@@ -2,22 +2,20 @@
     <div class="service-detail-page">
         <custom-header name="服务详情"></custom-header>
         <div class="service-detail-content">
-            <div class="record-box">
-                <div class="item-left">
-                    <img class="map-img" src="/map.png" alt="地图" />
-                    <div class="item-cont">
-                        <div class="item-header">
-                            <div class="farm-name">从化荔博园</div>
-                            <div class="tags">
-                                <span class="tag tag-area">200亩</span>
-                                <span class="tag tag-variety">桂味</span>
-                            </div>
-                        </div>
-                        <div class="farm-address">广东省广州市从化区从化区</div>
-                    </div>
-                </div>
-                <div class="item-right">在线沟通</div>
-            </div>
+            <farm-info-card
+                class="record-box"
+                :data="{
+                    farmName: '从化荔博园',
+                    area: '200亩',
+                    variety: '桂味',
+                    address: '广东省广州市从化区从化区',
+                    mapImage: '/map.png'
+                }"
+            >
+                <template #right>
+                    <div>在线沟通</div>
+                </template>
+            </farm-info-card>
             <div class="farm-service-box">
                 <div class="service-title">
                     <img src="@/assets/img/home/label-icon.png" alt="" />
@@ -91,6 +89,7 @@
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
+import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
 import { ref } from "vue";
 import recordItem from "@/components/recordItem.vue";
 
@@ -209,65 +208,7 @@ const contentData = ref([
     .service-detail-content {
         padding: 10px 12px;
         .record-box {
-            background: #fff;
-            padding: 16px 12px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .item-left {
-                display: flex;
-                gap: 8px;
-                .map-img {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 6px;
-                    object-fit: cover;
-                }
-                .item-cont {
-                    .item-header {
-                        display: flex;
-                        justify-content: space-between;
-                        gap: 10px;
-                        font-size: 14px;
-                        margin-bottom: 4px;
-                        .farm-name {
-                            font-weight: 600;
-                            color: #000;
-                        }
-                        .tags {
-                            display: flex;
-                            gap: 6px;
-                            .tag {
-                                padding: 1px 8px;
-                                border-radius: 2px;
-                                font-size: 12px;
-                                &.tag-area {
-                                    background: #f4f4f4;
-                                    color: #1d2129;
-                                }
-
-                                &.tag-variety {
-                                    background: rgba(232, 243, 255, 1);
-                                    color: #2199f8;
-                                }
-                            }
-                        }
-                    }
-                    .farm-address {
-                        font-size: 12px;
-                        color: #86909c;
-                    }
-                }
-            }
-            .item-right {
-                text-align: center;
-                color: #888b8d;
-                font-size: 12px;
-                padding: 5px 12px;
-                border-radius: 20px;
-                border: 1px solid #888b8d;
-            }
+            margin-bottom: 0;
         }
         .farm-service-box {
             padding: 16px 12px;

src/views/old_mini/mine/pages/serviceRecords.vue

@@ -10,32 +10,20 @@
             </el-select>
         </div>
         <div class="record-list">
-            <div class="record-item" v-for="(item, index) in recordList" :key="index" @click="handleItemClick(item)">
-                <div class="item-content">
-                    <img class="map-img" src="/map.png" alt="地图" />
-                    <div class="item-right">
-                        <div class="item-header">
-                            <div class="farm-name">{{ item.farmName }}</div>
-                            <div class="tags">
-                                <span class="tag tag-area">{{ item.area }}</span>
-                                <span class="tag tag-variety">{{ item.variety }}</span>
-                            </div>
-                        </div>
-                        <div class="farm-address">{{ item.address }}</div>
-                    </div>
-                </div>
-                <div class="item-footer">
-                    农事服务过<span class="service-count">{{ item.serviceCount }}</span
-                    >次
-                    <span class="view-detail">查看详情</span>
-                </div>
-            </div>
+            <farm-info-card
+                v-for="(item, index) in recordList"
+                :key="index"
+                :data="item"
+                @click="handleItemClick"
+                class="record-item"
+            />
         </div>
     </div>
 </template>
 <script setup>
 import { ref } from "vue";
 import customHeader from "@/components/customHeader.vue";
+import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 // 服务记录列表数据
@@ -75,8 +63,8 @@ const recordList = ref([
 ]);
 
 // 处理列表项点击
-const handleItemClick = (item) => {
-    console.log("点击了服务记录项:", item);
+const handleItemClick = (data) => {
+    console.log("点击了服务记录项:", data);
     // TODO: 跳转到详情页
     router.push("/service_detail");
 };
@@ -129,79 +117,6 @@ const areaOptions = [
     }
     .record-list {
         padding: 6px 12px;
-        .record-item {
-            background: #fff;
-            padding: 12px 10px;
-            border-radius: 5px;
-            .item-content {
-                display: flex;
-                gap: 8px;
-                .map-img {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 6px;
-                    object-fit: cover;
-                }
-                .item-right {
-                    .item-header {
-                        display: flex;
-                        justify-content: space-between;
-                        gap: 10px;
-                        font-size: 14px;
-                        margin-bottom: 4px;
-                        .farm-name {
-                            font-weight: 600;
-                            color: #000;
-                        }
-                        .tags {
-                            display: flex;
-                            gap: 6px;
-                            .tag {
-                                padding: 1px 8px;
-                                border-radius: 2px;
-                                font-size: 12px;
-                                &.tag-area {
-                                    background: #f4f4f4;
-                                    color: #1d2129;
-                                }
-
-                                &.tag-variety {
-                                    background: rgba(232, 243, 255, 1);
-                                    color: #2199f8;
-                                }
-                            }
-                        }
-                    }
-                    .farm-address {
-                        font-size: 12px;
-                        color: #86909c;
-                    }
-                }
-            }
-            .item-footer {
-                background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, transparent 100%);
-                padding: 6px 8px;
-                display: flex;
-                align-items: center;
-                border-radius: 4px;
-                margin-top: 10px;
-                color: #2e2e2e;
-                font-size: 12px;
-                span {
-                    color: #2199f8;
-                    font-weight: 500;
-                }
-                .service-count {
-                    margin: 0 2px;
-                }
-                .view-detail {
-                    margin-left: 10px;
-                }
-            }
-        }
-        .record-item + .record-item {
-            margin-top: 12px;
-        }
     }
 }
 </style>

src/views/old_mini/plan/index copy.vue

@@ -0,0 +1,581 @@
+<template>
+    <div class="plan-page">
+        <custom-header name="农事方案"></custom-header>
+        <div class="plan-title">
+            <div class="tabs">
+                <div class="tab" :class="{ active: activeTab === 'left' }" @click="setActiveTab('left')">专家方案</div>
+                <div class="tab" :class="{ active: activeTab === 'right' }" @click="setActiveTab('right')">
+                    我的方案
+                    <span class="badge-dot">2</span>
+                </div>
+                <div class="slider" :style="sliderStyle"></div>
+            </div>
+        </div>
+        <div class="plan-content" v-if="activeTab === 'left'">
+            <div class="filter-wrap">
+                <div class="filter-l">指导专家：韦帮稳</div>
+                <div class="filter-r" @click="toPage">更多专家<el-icon><ArrowRightBold /></el-icon></div>
+            </div>
+            <div class="expert-prescription">
+                <div class="plan-menu">
+                    <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
+                        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo">
+                            <el-sub-menu v-for="(menu, index) in menuData" :key="index" :index="String(menu.id)">
+                                <template #title>
+                                    <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
+                                    <span class="menu-text">{{ menu.name }}</span>
+                                </template>
+                                <el-menu-item v-for="item in menu.farmWorkArrangeList" :key="item.id" :index="`${menu.id}-${item.id}`">
+                                    <el-anchor-link :href="'#'+menu.name+item.farmWorkDetail?.name" :title="item.farmWorkDetail?.name || '摇花落花'" />
+                                </el-menu-item>
+                            </el-sub-menu>
+                        </el-menu>
+                    </el-anchor>
+                </div>
+                <div class="expert-content" ref="containerRef">
+                    <div v-for="(section, index) in menuData" :key="index" class="content-section">
+                        <div class="section-item" v-for="(sub, subI) in section.farmWorkArrangeList" :key="index+'-'+subI">
+                            <div class="section-id" :id="section.name+sub.farmWorkDetail?.name"></div>
+                            <record-item :record-item-data="sub">
+                                <template #title>
+                                    <div class="box-title">
+                                        <div class="title-l">
+                                            {{ sub.farmWorkDetail?.name }}
+                                            <span class="parent-text">{{ section.name }}</span>
+                                        </div>
+                                        <!-- <div class="title-btn" v-if="sub.selected == 0" @click="addToMyPlan">
+                                            <el-icon color="#fff" size="14"><Plus /></el-icon>
+                                        </div> -->
+                                    </div>
+                                </template>
+                            </record-item>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 底部 -->
+            <div class="fixed-bottom">
+                <div class="bottom-l">
+                    <div class="l-btn">
+                        <el-icon color="#666666" class="btn-icon" size="16"><Download /></el-icon>
+                        下载处方
+                    </div>
+                    <div class="l-btn">
+                        <el-icon color="#666666" class="btn-icon" size="16"><ChatDotRound /></el-icon>
+                        咨询专家
+                    </div>
+                </div>
+                <div class="bottom-r">全部添加</div>
+            </div>
+        </div>
+        <div class="plan-content my-recipe" v-if="activeTab === 'right'">
+            <my-prescription :isSubPage="true"></my-prescription>
+            <!-- <div class="fixed-bottom">
+                <div class="bottom-l">
+                    <div class="l-btn">
+                        <img class="btn-icon calculator-icon" src="@/assets/img/home/calculator.png" alt="" />
+                        投入产出计算器
+                    </div>
+                </div>
+                <div class="bottom-r">新增农事</div>
+            </div> -->
+        </div>
+    </div>
+    <add-group ref="addGroupRef" />
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import recordItem from "@/components/recordItem.vue";
+import addGroup from "./components/addGroup.vue";
+import myPrescription from "./components/myPrescription.vue";
+import customHeader from "@/components/customHeader.vue";
+import { useStore } from "vuex";
+import { useRouter, useRoute } from "vue-router";
+const store = useStore();
+const router = useRouter()
+const route = useRoute()
+
+const tabBarHeight = computed(() => store.state.home.tabBarHeight);
+
+const containerRef = ref(null);
+const handleClick = (e) => {
+    e.preventDefault();
+};
+const activeTab = ref("left");
+// const tabBarHeight = computed(() => store.state.home.tabBarHeight);
+const sliderStyle = computed(() => {
+    // 根据当前激活的选项卡计算滑动条位置
+    const position = activeTab.value === "left" ? "25%" : "75%";
+    return {
+        left: `calc(${position} - 12px)`, // 减去滑动条宽度的一半以实现居中
+    };
+});
+function setActiveTab(tab) {
+    activeTab.value = tab;
+}
+const typeVal = ref([1, 3]);
+
+const typeOptions = ref([
+    {
+        value: 1,
+        label: "荔枝",
+        children: [
+            {
+                value: 2,
+                label: "井岗红糯",
+            },
+            {
+                value: 3,
+                label: "桂味",
+            },
+            {
+                value: 4,
+                label: "妃子笑",
+            },
+            {
+                value: 5,
+                label: "黑叶",
+            },
+        ],
+    },
+    {
+        value: 6,
+        label: "龙眼",
+        children: [
+            {
+                value: 7,
+                label: "龙眼1",
+            },
+            {
+                value: 8,
+                label: "龙眼2",
+            },
+            {
+                value: 9,
+                label: "龙眼3",
+            },
+            {
+                value: 10,
+                label: "龙眼4",
+            },
+        ],
+    },
+    {
+        value: 11,
+        label: "枇杷",
+        children: [
+            {
+                value: 12,
+                label: "枇杷1",
+            },
+            {
+                value: 13,
+                label: "枇杷2",
+            },
+            {
+                value: 14,
+                label: "枇杷3",
+            },
+            {
+                value: 15,
+                label: "枇杷4",
+            },
+        ],
+    },
+]);
+
+const proviceVal = ref("广东");
+const proviceOptions = ref([
+    {
+        value: "广东",
+        label: "广东省",
+    },
+    {
+        value: "广西",
+        label: "广西省",
+    },
+    {
+        value: "福建",
+        label: "福建省",
+    },
+    {
+        value: "海南",
+        label: "海南省",
+    },
+]);
+
+// 菜单
+const defaultActive = ref("1-1");
+
+const menuData = ref([])
+
+const activePlanIndex = ref(0);
+const handlePlanClick = (index) => {
+    activePlanIndex.value = index;
+};
+
+const addGroupRef = ref(null);
+// 新增方案
+function newPlan() {
+    addGroupRef.value.openClientPopup();
+}
+
+// 将专家处方添加到我的处方
+function addToMyPlan() {
+    addGroupRef.value.openClientPopup({type: "edit"});
+}
+
+function toPage() {
+    router.push("/expert_list?isToSelect=true")
+}
+
+function getWorkList() {
+    VE_API.home.getPhenologyFarmWorkList({farmId: 93301, containerId: route.query.containerId || 2}).then(({data}) => {
+        menuData.value = data
+    })
+}
+
+onMounted(() => {
+    getWorkList()
+})
+</script>
+
+<style lang="scss" scoped>
+.plan-page {
+    position: relative;
+    height: 100vh;
+    .plan-title {
+        width: 158px;
+        margin: 0 auto;
+        padding: 6px 0;
+        .tabs {
+            display: flex;
+            position: relative;
+            height: 36px;
+            line-height: 36px;
+            .tab {
+                flex: 1;
+                text-align: center;
+                cursor: pointer;
+                color: rgba(0, 0, 0, 0.5);
+                z-index: 2;
+                transition: color 0.3s ease;
+                position: relative;
+                &.active {
+                    color: #000000;
+                    font-weight: bold;
+                }
+                .badge-dot {
+                    position: absolute;
+                    top: 0;
+                    right: -6px;
+                    width: 16px;
+                    height: 16px;
+                    background-color: #ff0000;
+                    border-radius: 50%;
+                    font-size: 12px;
+                    line-height: 16px;
+                    color: #fff;
+                }
+            }
+            .slider {
+                position: absolute;
+                height: 4px;
+                width: 24px;
+                background: #2199f8;
+                border-radius: 16px;
+                bottom: 0;
+                left: calc(25% - 12px); /* 初始位置在第一个选项卡中间 */
+                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+            }
+        }
+
+        .content {
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            min-height: 200px;
+        }
+
+        .content-section {
+            display: none;
+            animation: fadeIn 0.5s ease;
+            
+            .section-item {
+                position: relative;
+            }
+        }
+
+        .content-section.active {
+            display: block;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    }
+    .plan-content {
+        background: #f5f7fb;
+        .filter-wrap {
+            padding: 10px 12px;
+            width: 100%;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .filter-r {
+                height: 32px;
+                display: flex;
+                align-items: center;
+                padding: 0 18px;
+                background: rgba(33, 153, 248, 0.1);
+                border-radius: 20px;
+                color: #2199F8;
+                font-size: 14px;
+            }
+        }
+    }
+    .fixed-bottom {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 12px;
+        background: #fff;
+        box-sizing: border-box;
+        border-top: 1px solid rgba(153, 153, 153, 0.2);
+        .bottom-l {
+            display: flex;
+            align-items: center;
+            .l-btn {
+                border: 1px solid rgba(153, 153, 153, 0.5);
+                border-radius: 30px;
+                padding: 0 8px 0 12px;
+                height: 32px;
+                line-height: 32px;
+                box-sizing: border-box;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: #666666;
+                .btn-icon {
+                    padding-right: 3px;
+                }
+                .calculator-icon {
+                    width: 12px;
+                }
+            }
+            .l-btn + .l-btn {
+                margin-left: 10px;
+            }
+        }
+        .bottom-r {
+            height: 32px;
+            line-height: 32px;
+            background: #2199f8;
+            border-radius: 20px;
+            color: #fff;
+            padding: 0 12px;
+        }
+    }
+    .expert-prescription {
+        display: flex;
+        width: 100%;
+        height: calc(100vh - 52px - 48px - 50px);
+        .plan-menu {
+            width: 100px;
+            height: 100%;
+            overflow: auto;
+            padding: 10px 0;
+            box-sizing: border-box;
+            background: #fff;
+            border-radius: 0 10px 10px 0;
+            .menu-icon {
+                width: 13px;
+            }
+            .menu-text {
+                padding: 0 4px;
+            }
+            ::v-deep {
+                .el-anchor {
+                    height: 100%;
+                    background: none;
+                }
+                .el-anchor__marker {
+                    display: none;
+                }
+                .el-menu {
+                    background: none;
+                    border: none;
+                    .el-sub-menu__title {
+                        background: none;
+                        padding: 0 2px;
+                        justify-content: center;
+                    }
+                    .el-sub-menu__title {
+                        height: 32px;
+                    }
+                    .el-sub-menu .el-sub-menu__icon-arrow {
+                        position: static;
+                        padding-top: 6px;
+                    }
+                    .el-sub-menu {
+                        margin-bottom: 16px;
+                        &.is-opened {
+                            .el-sub-menu__icon-arrow {
+                                padding-bottom: 6px;
+                                padding-top: 0;
+                            }
+                        }
+                        .el-menu-item {
+                            height: 32px;
+                            line-height: 32px;
+                            margin: 4px 8px;
+                            padding: 0 2px;
+                            justify-content: center;
+                            background: none;
+                        }
+                        .el-menu-item.is-active {
+                            background: none;
+                            color: #fff;
+                        }
+                        .el-anchor__item {
+                            width: 100%;
+                            text-align: center;
+                        }
+                        .el-anchor__link {
+                            color: #666666;
+                        }
+                        .el-anchor__link.is-active {
+                            background: rgba(33, 153, 248, 0.1);
+                            border-radius: 20px;
+                            color: #2199F8;
+                            border: 1px solid #2199F8;
+                        }
+                    }
+                }
+                .el-anchor__list {
+                    padding-left: 0;
+                }
+            }
+        }
+        .expert-content {
+            width: calc(100% - 100px);
+            height: 100%;
+            overflow: auto;
+            padding-bottom: 80px;
+            box-sizing: border-box;
+            .content-section {
+                position: relative;
+                .section-item {
+                    position: relative;
+                }
+                .section-id {
+                    position: absolute;
+                    // top: -6px;
+                    top: 0;
+                    width: 100%;
+                    height: 1px;
+                }
+            }
+            .box-title {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding-bottom: 8px;
+                border-bottom: 1px solid #f5f5f5;
+                margin-bottom: 8px;
+                .title-l {
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: #000;
+                    .parent-text {
+                        margin-left: 5px;
+                        font-size: 12px;
+                        font-weight: normal;
+                        padding: 4px 6px;
+                        border-radius: 14px;
+                        background: rgba(119, 119, 119, 0.1);
+                    }
+                }
+                .title-btn {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    background: #2199f8;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+
+    .my-recipe {
+        .filter-wrap {
+            .plan-box {
+                display: flex;
+                overflow: auto;
+                white-space: nowrap;
+                align-items: center;
+                padding-left: 12px;
+                .plan-item {
+                    color: #000000;
+                    background: #f1f1f1;
+                    padding: 0 12px;
+                    height: 32px;
+                    line-height: 32px;
+                    border-radius: 20px;
+                    &.active {
+                        background: rgba(33, 153, 248, 0.2);
+                        color: #2199f8;
+                    }
+                }
+                .plan-item + .plan-item {
+                    margin-left: 10px;
+                }
+            }
+            .plan-add {
+                width: 80px;
+                height: 30px;
+                border: 1px solid #2199f8;
+                border-radius: 20px;
+                flex: none;
+                line-height: 32px;
+                text-align: center;
+                margin: 0 12px;
+                color: #2199f8;
+                font-size: 14px;
+            }
+        }
+        .title-r {
+            display: flex;
+            align-items: center;
+            .btn-item {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #2199f8;
+                &.del-btn {
+                    margin-right: 5px;
+                    background: #ff953d;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/plan/index.vue

@@ -1,21 +1,7 @@
 <template>
-    <div class="plan-page">
+    <div class="farm-card-page">
         <custom-header name="农事方案"></custom-header>
-        <div class="plan-title">
-            <div class="tabs">
-                <div class="tab" :class="{ active: activeTab === 'left' }" @click="setActiveTab('left')">专家方案</div>
-                <div class="tab" :class="{ active: activeTab === 'right' }" @click="setActiveTab('right')">
-                    我的方案
-                    <span class="badge-dot">2</span>
-                </div>
-                <div class="slider" :style="sliderStyle"></div>
-            </div>
-        </div>
-        <div class="plan-content" v-if="activeTab === 'left'">
-            <div class="filter-wrap">
-                <div class="filter-l">指导专家：韦帮稳</div>
-                <div class="filter-r" @click="toPage">更多专家<el-icon><ArrowRightBold /></el-icon></div>
-            </div>
+        <div class="farm-card-content">
             <div class="expert-prescription">
                 <div class="plan-menu">
                     <el-anchor :container="containerRef" direction="vertical" type="default" @click="handleClick">
@@ -25,8 +11,15 @@
                                     <img class="menu-icon" :src="require(`@/assets/img/gallery/icon-${index}.png`)" />
                                     <span class="menu-text">{{ menu.name }}</span>
                                 </template>
-                                <el-menu-item v-for="item in menu.farmWorkArrangeList" :key="item.id" :index="`${menu.id}-${item.id}`">
-                                    <el-anchor-link :href="'#'+menu.name+item.farmWorkDetail?.name" :title="item.farmWorkDetail?.name || '摇花落花'" />
+                                <el-menu-item
+                                    v-for="item in menu.farmWorkArrangeList"
+                                    :key="item.id"
+                                    :index="`${menu.id}-${item.id}`"
+                                >
+                                    <el-anchor-link
+                                        :href="'#' + menu.name + item.farmWorkDetail?.name"
+                                        :title="item.farmWorkDetail?.name || '摇花落花'"
+                                    />
                                 </el-menu-item>
                             </el-sub-menu>
                         </el-menu>
@@ -34,8 +27,12 @@
                 </div>
                 <div class="expert-content" ref="containerRef">
                     <div v-for="(section, index) in menuData" :key="index" class="content-section">
-                        <div class="section-item" v-for="(sub, subI) in section.farmWorkArrangeList" :key="index+'-'+subI">
-                            <div class="section-id" :id="section.name+sub.farmWorkDetail?.name"></div>
+                        <div
+                            class="section-item"
+                            v-for="(sub, subI) in section.farmWorkArrangeList"
+                            :key="index + '-' + subI"
+                        >
+                            <div class="section-id" :id="section.name + sub.farmWorkDetail?.name"></div>
                             <record-item :record-item-data="sub">
                                 <template #title>
                                     <div class="box-title">
@@ -43,9 +40,6 @@
                                             {{ sub.farmWorkDetail?.name }}
                                             <span class="parent-text">{{ section.name }}</span>
                                         </div>
-                                        <!-- <div class="title-btn" v-if="sub.selected == 0" @click="addToMyPlan">
-                                            <el-icon color="#fff" size="14"><Plus /></el-icon>
-                                        </div> -->
                                     </div>
                                 </template>
                             </record-item>
@@ -53,527 +47,167 @@
                     </div>
                 </div>
             </div>
-            <!-- 底部 -->
-            <div class="fixed-bottom">
-                <div class="bottom-l">
-                    <div class="l-btn">
-                        <el-icon color="#666666" class="btn-icon" size="16"><Download /></el-icon>
-                        下载处方
-                    </div>
-                    <div class="l-btn">
-                        <el-icon color="#666666" class="btn-icon" size="16"><ChatDotRound /></el-icon>
-                        咨询专家
-                    </div>
-                </div>
-                <div class="bottom-r">全部添加</div>
-            </div>
-        </div>
-        <div class="plan-content my-recipe" v-if="activeTab === 'right'">
-            <my-prescription :isSubPage="true"></my-prescription>
-            <!-- <div class="fixed-bottom">
-                <div class="bottom-l">
-                    <div class="l-btn">
-                        <img class="btn-icon calculator-icon" src="@/assets/img/home/calculator.png" alt="" />
-                        投入产出计算器
-                    </div>
-                </div>
-                <div class="bottom-r">新增农事</div>
-            </div> -->
         </div>
     </div>
-    <add-group ref="addGroupRef" />
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import recordItem from "@/components/recordItem.vue";
-import addGroup from "./components/addGroup.vue";
-import myPrescription from "./components/myPrescription.vue";
 import customHeader from "@/components/customHeader.vue";
-import { useStore } from "vuex";
-import { useRouter, useRoute } from "vue-router";
-const store = useStore();
-const router = useRouter()
-const route = useRoute()
-
-const tabBarHeight = computed(() => store.state.home.tabBarHeight);
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import recordItem from "@/components/recordItem.vue";
 
+const route = useRoute();
 const containerRef = ref(null);
 const handleClick = (e) => {
     e.preventDefault();
 };
-const activeTab = ref("left");
-// const tabBarHeight = computed(() => store.state.home.tabBarHeight);
-const sliderStyle = computed(() => {
-    // 根据当前激活的选项卡计算滑动条位置
-    const position = activeTab.value === "left" ? "25%" : "75%";
-    return {
-        left: `calc(${position} - 12px)`, // 减去滑动条宽度的一半以实现居中
-    };
-});
-function setActiveTab(tab) {
-    activeTab.value = tab;
-}
-const typeVal = ref([1, 3]);
-
-const typeOptions = ref([
-    {
-        value: 1,
-        label: "荔枝",
-        children: [
-            {
-                value: 2,
-                label: "井岗红糯",
-            },
-            {
-                value: 3,
-                label: "桂味",
-            },
-            {
-                value: 4,
-                label: "妃子笑",
-            },
-            {
-                value: 5,
-                label: "黑叶",
-            },
-        ],
-    },
-    {
-        value: 6,
-        label: "龙眼",
-        children: [
-            {
-                value: 7,
-                label: "龙眼1",
-            },
-            {
-                value: 8,
-                label: "龙眼2",
-            },
-            {
-                value: 9,
-                label: "龙眼3",
-            },
-            {
-                value: 10,
-                label: "龙眼4",
-            },
-        ],
-    },
-    {
-        value: 11,
-        label: "枇杷",
-        children: [
-            {
-                value: 12,
-                label: "枇杷1",
-            },
-            {
-                value: 13,
-                label: "枇杷2",
-            },
-            {
-                value: 14,
-                label: "枇杷3",
-            },
-            {
-                value: 15,
-                label: "枇杷4",
-            },
-        ],
-    },
-]);
-
-const proviceVal = ref("广东");
-const proviceOptions = ref([
-    {
-        value: "广东",
-        label: "广东省",
-    },
-    {
-        value: "广西",
-        label: "广西省",
-    },
-    {
-        value: "福建",
-        label: "福建省",
-    },
-    {
-        value: "海南",
-        label: "海南省",
-    },
-]);
-
 // 菜单
 const defaultActive = ref("1-1");
 
-const menuData = ref([])
-
-const activePlanIndex = ref(0);
-const handlePlanClick = (index) => {
-    activePlanIndex.value = index;
-};
-
-const addGroupRef = ref(null);
-// 新增方案
-function newPlan() {
-    addGroupRef.value.openClientPopup();
-}
-
-// 将专家处方添加到我的处方
-function addToMyPlan() {
-    addGroupRef.value.openClientPopup({type: "edit"});
-}
-
-function toPage() {
-    router.push("/expert_list?isToSelect=true")
-}
+const menuData = ref([]);
 
 function getWorkList() {
-    VE_API.home.getPhenologyFarmWorkList({farmId: 93301, containerId: route.query.containerId || 2}).then(({data}) => {
-        menuData.value = data
-    })
+    VE_API.home
+        .getPhenologyFarmWorkList({ farmId: 93301, containerId: route.query.containerId || 2 })
+        .then(({ data }) => {
+            menuData.value = data;
+        });
 }
 
 onMounted(() => {
-    getWorkList()
-})
+    getWorkList();
+});
 </script>
 
-<style lang="scss" scoped>
-.plan-page {
-    position: relative;
+<style scoped lang="scss">
+.farm-card-page {
+    width: 100%;
     height: 100vh;
-    .plan-title {
-        width: 158px;
-        margin: 0 auto;
-        padding: 6px 0;
-        .tabs {
-            display: flex;
-            position: relative;
-            height: 36px;
-            line-height: 36px;
-            .tab {
-                flex: 1;
-                text-align: center;
-                cursor: pointer;
-                color: rgba(0, 0, 0, 0.5);
-                z-index: 2;
-                transition: color 0.3s ease;
-                position: relative;
-                &.active {
-                    color: #000000;
-                    font-weight: bold;
-                }
-                .badge-dot {
-                    position: absolute;
-                    top: 0;
-                    right: -6px;
-                    width: 16px;
-                    height: 16px;
-                    background-color: #ff0000;
-                    border-radius: 50%;
-                    font-size: 12px;
-                    line-height: 16px;
-                    color: #fff;
-                }
-            }
-            .slider {
-                position: absolute;
-                height: 4px;
-                width: 24px;
-                background: #2199f8;
-                border-radius: 16px;
-                bottom: 0;
-                left: calc(25% - 12px); /* 初始位置在第一个选项卡中间 */
-                transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-            }
-        }
-
-        .content {
-            padding: 20px;
-            background: #f8f9fa;
-            border-radius: 8px;
-            min-height: 200px;
-        }
-
-        .content-section {
-            display: none;
-            animation: fadeIn 0.5s ease;
-            
-            .section-item {
-                position: relative;
-            }
-        }
-
-        .content-section.active {
-            display: block;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-    .plan-content {
-        background: #f5f7fb;
-        .filter-wrap {
-            padding: 10px 12px;
-            width: 100%;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .filter-r {
-                height: 32px;
-                display: flex;
-                align-items: center;
-                padding: 0 18px;
-                background: rgba(33, 153, 248, 0.1);
-                border-radius: 20px;
-                color: #2199F8;
-                font-size: 14px;
-            }
-        }
-    }
-    .fixed-bottom {
-        position: absolute;
-        bottom: 0;
-        left: 0;
+    background: #f5f7fb;
+    .farm-card-content {
         width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 14px 12px;
-        background: #fff;
-        box-sizing: border-box;
-        border-top: 1px solid rgba(153, 153, 153, 0.2);
-        .bottom-l {
+        height: 100%;
+        .expert-prescription {
             display: flex;
-            align-items: center;
-            .l-btn {
-                border: 1px solid rgba(153, 153, 153, 0.5);
-                border-radius: 30px;
-                padding: 0 8px 0 12px;
-                height: 32px;
-                line-height: 32px;
+            width: 100%;
+            height: calc(100vh - 40px);
+            padding-top: 10px;
+            .plan-menu {
+                width: 100px;
+                height: 100%;
+                overflow: auto;
+                padding: 10px 0;
                 box-sizing: border-box;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #666666;
-                .btn-icon {
-                    padding-right: 3px;
+                background: #fff;
+                border-radius: 0 10px 10px 0;
+                .menu-icon {
+                    width: 13px;
                 }
-                .calculator-icon {
-                    width: 12px;
+                .menu-text {
+                    padding: 0 4px;
                 }
-            }
-            .l-btn + .l-btn {
-                margin-left: 10px;
-            }
-        }
-        .bottom-r {
-            height: 32px;
-            line-height: 32px;
-            background: #2199f8;
-            border-radius: 20px;
-            color: #fff;
-            padding: 0 12px;
-        }
-    }
-    .expert-prescription {
-        display: flex;
-        width: 100%;
-        height: calc(100vh - 52px - 48px - 50px);
-        .plan-menu {
-            width: 100px;
-            height: 100%;
-            overflow: auto;
-            padding: 10px 0;
-            box-sizing: border-box;
-            background: #fff;
-            border-radius: 0 10px 10px 0;
-            .menu-icon {
-                width: 13px;
-            }
-            .menu-text {
-                padding: 0 4px;
-            }
-            ::v-deep {
-                .el-anchor {
-                    height: 100%;
-                    background: none;
-                }
-                .el-anchor__marker {
-                    display: none;
-                }
-                .el-menu {
-                    background: none;
-                    border: none;
-                    .el-sub-menu__title {
+                ::v-deep {
+                    .el-anchor {
+                        height: 100%;
                         background: none;
-                        padding: 0 2px;
-                        justify-content: center;
-                    }
-                    .el-sub-menu__title {
-                        height: 32px;
                     }
-                    .el-sub-menu .el-sub-menu__icon-arrow {
-                        position: static;
-                        padding-top: 6px;
+                    .el-anchor__marker {
+                        display: none;
                     }
-                    .el-sub-menu {
-                        margin-bottom: 16px;
-                        &.is-opened {
-                            .el-sub-menu__icon-arrow {
-                                padding-bottom: 6px;
-                                padding-top: 0;
-                            }
-                        }
-                        .el-menu-item {
-                            height: 32px;
-                            line-height: 32px;
-                            margin: 4px 8px;
+                    .el-menu {
+                        background: none;
+                        border: none;
+                        .el-sub-menu__title {
+                            background: none;
                             padding: 0 2px;
                             justify-content: center;
-                            background: none;
                         }
-                        .el-menu-item.is-active {
-                            background: none;
-                            color: #fff;
-                        }
-                        .el-anchor__item {
-                            width: 100%;
-                            text-align: center;
+                        .el-sub-menu__title {
+                            height: 32px;
                         }
-                        .el-anchor__link {
-                            color: #666666;
+                        .el-sub-menu .el-sub-menu__icon-arrow {
+                            position: static;
+                            padding-top: 6px;
                         }
-                        .el-anchor__link.is-active {
-                            background: rgba(33, 153, 248, 0.1);
-                            border-radius: 20px;
-                            color: #2199F8;
-                            border: 1px solid #2199F8;
+                        .el-sub-menu {
+                            margin-bottom: 16px;
+                            &.is-opened {
+                                .el-sub-menu__icon-arrow {
+                                    padding-bottom: 6px;
+                                    padding-top: 0;
+                                }
+                            }
+                            .el-menu-item {
+                                height: 32px;
+                                line-height: 32px;
+                                margin: 4px 8px;
+                                padding: 0 2px;
+                                justify-content: center;
+                                background: none;
+                            }
+                            .el-menu-item.is-active {
+                                background: none;
+                                color: #fff;
+                            }
+                            .el-anchor__item {
+                                width: 100%;
+                                text-align: center;
+                            }
+                            .el-anchor__link {
+                                color: #666666;
+                            }
+                            .el-anchor__link.is-active {
+                                background: rgba(33, 153, 248, 0.1);
+                                border-radius: 20px;
+                                color: #2199f8;
+                                border: 1px solid #2199f8;
+                            }
                         }
                     }
-                }
-                .el-anchor__list {
-                    padding-left: 0;
+                    .el-anchor__list {
+                        padding-left: 0;
+                    }
                 }
             }
-        }
-        .expert-content {
-            width: calc(100% - 100px);
-            height: 100%;
-            overflow: auto;
-            padding-bottom: 80px;
-            box-sizing: border-box;
-            .content-section {
-                position: relative;
-                .section-item {
+            .expert-content {
+                width: calc(100% - 100px);
+                height: 100%;
+                overflow: auto;
+                box-sizing: border-box;
+                .content-section {
                     position: relative;
-                }
-                .section-id {
-                    position: absolute;
-                    // top: -6px;
-                    top: 0;
-                    width: 100%;
-                    height: 1px;
-                }
-            }
-            .box-title {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding-bottom: 8px;
-                border-bottom: 1px solid #f5f5f5;
-                margin-bottom: 8px;
-                .title-l {
-                    font-size: 16px;
-                    font-weight: 600;
-                    color: #000;
-                    .parent-text {
-                        margin-left: 5px;
-                        font-size: 12px;
-                        font-weight: normal;
-                        padding: 4px 6px;
-                        border-radius: 14px;
-                        background: rgba(119, 119, 119, 0.1);
+                    .section-item {
+                        position: relative;
+                    }
+                    .section-id {
+                        position: absolute;
+                        // top: -6px;
+                        top: 0;
+                        width: 100%;
+                        height: 1px;
                     }
                 }
-                .title-btn {
-                    width: 24px;
-                    height: 24px;
-                    border-radius: 50%;
-                    background: #2199f8;
+                .box-title {
                     display: flex;
                     align-items: center;
-                    justify-content: center;
-                }
-            }
-        }
-    }
-
-    .my-recipe {
-        .filter-wrap {
-            .plan-box {
-                display: flex;
-                overflow: auto;
-                white-space: nowrap;
-                align-items: center;
-                padding-left: 12px;
-                .plan-item {
-                    color: #000000;
-                    background: #f1f1f1;
-                    padding: 0 12px;
-                    height: 32px;
-                    line-height: 32px;
-                    border-radius: 20px;
-                    &.active {
-                        background: rgba(33, 153, 248, 0.2);
-                        color: #2199f8;
+                    padding-bottom: 8px;
+                    border-bottom: 1px solid #f5f5f5;
+                    margin-bottom: 8px;
+                    .title-l {
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: #000;
+                        .parent-text {
+                            margin-left: 5px;
+                            font-size: 12px;
+                            font-weight: normal;
+                            padding: 4px 6px;
+                            border-radius: 14px;
+                            background: rgba(119, 119, 119, 0.1);
+                        }
                     }
                 }
-                .plan-item + .plan-item {
-                    margin-left: 10px;
-                }
-            }
-            .plan-add {
-                width: 80px;
-                height: 30px;
-                border: 1px solid #2199f8;
-                border-radius: 20px;
-                flex: none;
-                line-height: 32px;
-                text-align: center;
-                margin: 0 12px;
-                color: #2199f8;
-                font-size: 14px;
-            }
-        }
-        .title-r {
-            display: flex;
-            align-items: center;
-            .btn-item {
-                width: 24px;
-                height: 24px;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background: #2199f8;
-                &.del-btn {
-                    margin-right: 5px;
-                    background: #ff953d;
-                }
             }
         }
     }

src/views/old_mini/user/index.vue

@@ -22,20 +22,23 @@
                     <template #value>
                         <div @click.stop="hadnleManage(item)" class="text">管理</div>
                     </template>
-                    <div class="list-item" v-for="(ele, idx) in item.children" :key="idx + ele.id">
-                        <div class="item-flex">
-                            <img class="photo" src="" alt="" />
-                            <div class="item-text">
-                                <div class="name">
-                                    <span>农场111</span>
-                                    <el-icon color="#2199F8" size="16"><Edit /></el-icon>
-                                </div>
-                                <div>农场品种：荔枝-桂味</div>
-                                <div>农场面积：190亩</div>
-                                <div>农场位置：湖北省武汉市富里唱鑫园5023</div>
-                            </div>
-                        </div>
-                    </div>
+                    <farm-info-card
+                        v-for="(ele, idx) in item.children"
+                        :key="idx + ele.id"
+                        class="list-item"
+                        :data="{
+                            farmName: ele.farmName || '农场111',
+                            area: ele.area || '190亩',
+                            variety: ele.variety || `荔枝-${ele.name}`,
+                            address: ele.address || '湖北省武汉市富里唱鑫园5023',
+                            mapImage: ele.mapImage || '/map.png'
+                        }"
+                        @click="handleItemClick"
+                    >
+                        <template #right>
+                            <div>在线沟通</div>
+                        </template>
+                    </farm-info-card>
                 </collapse-item>
             </collapse>
         </div>
@@ -52,6 +55,7 @@ import { Collapse, CollapseItem } from "vant";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import addPopup from "./components/addPopup.vue";
+import FarmInfoCard from "@/components/pageComponents/FarmInfoCard.vue";
 const router = useRouter();
 
 const input = ref("");
@@ -71,6 +75,12 @@ const hadnleManage = (value) => {
     router.push(`/user_manage?name=${value.name}&total=${value.children.length}&isGroup=${value.isGroup}`);
 };
 
+// 处理列表项点击
+const handleItemClick = (data) => {
+    console.log("点击了列表项:", data);
+    // TODO: 处理点击逻辑
+};
+
 const list = ref([
     {
         name: "常用列表",
@@ -159,9 +169,12 @@ const activeNames = ref([0]);
         width: 100%;
         margin-top: 12px;
         .text {
-            color: #2199F8;
+            color: #7c7c7c;
         }
         ::v-deep {
+            .van-collapse-item__content{
+                padding: 0;
+            }
             .van-cell {
                 border-radius: 5px 5px 0 0;
                 justify-content: space-between;
@@ -194,41 +207,9 @@ const activeNames = ref([0]);
             }
         }
         .list-item {
-            border-radius: 12px;
-            background: #fff;
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .item-flex {
-                display: flex;
-                align-items: center;
-            }
-            .photo {
-                width: 68px;
-                height: 68px;
-                border-radius: 8px;
-                margin-right: 12px;
-                background: red;
+            & + .list-item {
+                margin: 0;
             }
-            .item-text {
-                color: #999999;
-                font-size: 12px;
-                line-height: 1.6;
-                .name {
-                    display: flex;
-                    align-items: center;
-                    span {
-                        font-size: 15px;
-                        color: #000;
-                        font-weight: 500;
-                        margin-right: 5px;
-                    }
-                }
-            }
-        }
-        .list-item + .list-item {
-            margin-top: 12px;
         }
     }
     .footer {