feat：添加个人中心页面和我的消息页面

src/router/globalRoutes.js

@@ -27,16 +27,9 @@ export default [
     },
     // 我的消息
     {
-        path: "/plan",
-        name: "Plan",
-        meta: { showTabbar: true },
-        component: () => import("@/views/old_mini/plan/index.vue"),
-    },
-    // 我的消息 详情
-    {
-        path: "/message_detail",
-        name: "MessageDetail",
-        component: () => import("@/views/old_mini/message/detail.vue"),
+        path: "/message",
+        name: "Message",
+        component: () => import("@/views/old_mini/mine/pages/message.vue"),
     },
     // 创建农场
     {

src/views/old_mini/home/patrolPhoto.vue

@@ -2,32 +2,48 @@
     <div class="patrol-photo">
         <custom-header name="农场照片"></custom-header>
         <div class="patrol-content">
-            <div class="photo-wrap">
-                <div class="photo-header">
-                    <div class="photo-select">
-                        <el-date-picker class="picker" v-model="value1" type="date" placeholder="全部日期" />
-                        <el-select class="select" v-model="value" placeholder="全部区域">
-                            <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value"
-                            />
-                        </el-select>
+            <div class="photo-header">
+                <el-date-picker style="width: 120px" v-model="value1" type="date" placeholder="全部日期" />
+                <div class="select-wrap">
+                    <div
+                        :class="['select-item', { active: tabActive === index }]"
+                        v-for="(item, index) in tabsList"
+                        :key="index"
+                        @click="handleTabAct(index)"
+                    >
+                        {{ item }}
                     </div>
-                    <div class="select-wrap">
-                        <div
-                            :class="['select-item', { active: tabActive === index }]"
-                            v-for="(item, index) in tabsList"
-                            :key="index"
-                            @click="handleTabAct(index)"
-                        >
-                            {{ item }}
+                </div>
+            </div>
+            <div class="photo-wrap">
+                <div class="photo-list">
+                    <div class="photo-item">
+                        <div class="photo-item-top">
+                            <span class="date-text">2024年7月2日</span>
+                            <div class="weather-wrap">
+                                <div class="weather-item">
+                                    <el-icon><Sunny /></el-icon>
+                                    <span>晴</span>
+                                </div>
+                                <div class="weather-item">
+                                    <el-icon><Sunny /></el-icon>
+                                    <span>36℃</span>
+                                </div>
+                                <div class="weather-item">
+                                    <el-icon><Sunny /></el-icon>
+                                    <span>74%</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="photo-item-bottom">
+                            <div class="region-text">2区</div>
+                            <div class="photo-img-wrap">
+                                456
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="photo-wrap">
-                    <!-- <List
+                <!-- <List
                         class="photo-list"
                         v-model:loading="loading"
                         :finished="finished"
@@ -42,10 +58,8 @@
                                 :lock="false"
                                 :isShowNum="false"
                             ></album-carousel-item>
-                            <div class="btn" @click="handleFeedback">反馈</div>
                         </div>
                     </List> -->
-                </div>
             </div>
         </div>
     </div>
@@ -53,8 +67,8 @@
 
 <script setup>
 import { onActivated, ref } from "vue";
-import { useRouter } from "vue-router"; 
-import { List, Popup } from "vant";
+import { useRouter } from "vue-router";
+import { List } from "vant";
 // import albumCarouselItem from "@/views/old_mini/feature_index/pages/album_compoents/albumCarouselItem.vue";
 import { base_img_url2, resize } from "@/api/config";
 import customHeader from "@/components/customHeader.vue";
@@ -68,30 +82,6 @@ const handleTabAct = (index) => {
 };
 
 const value1 = ref("");
-const value = ref("");
-
-const options = [
-    {
-        value: "Option1",
-        label: "Option1",
-    },
-    {
-        value: "Option2",
-        label: "Option2",
-    },
-    {
-        value: "Option3",
-        label: "Option3",
-    },
-    {
-        value: "Option4",
-        label: "Option4",
-    },
-    {
-        value: "Option5",
-        label: "Option5",
-    },
-];
 
 const treeImgList = ref([]);
 const loading = ref(false);
@@ -142,6 +132,15 @@ onActivated(() => {
     .van-list__finished-text {
         width: 100%;
     }
+    .el-input__wrapper {
+        box-shadow: none;
+        border: 1px solid #2199f8;
+        --el-input-placeholder-color: #2199f8;
+    }
+    .el-input__inner,
+    .el-input__prefix {
+        color: #2199f8;
+    }
 }
 .patrol-photo {
     width: 100%;
@@ -152,78 +151,89 @@ onActivated(() => {
         width: 100%;
         height: calc(100vh - 50px);
         box-sizing: border-box;
-        .photo-wrap {
+        margin-top: 10px;
+        .photo-header {
+            display: flex;
             width: 100%;
-            height: 100%;
-            margin-top: 10px;
-            .photo-header {
-                .photo-select {
-                    display: flex;
-                    .select {
-                        width: 60%;
-                        margin-left: 12px;
-                    }
-                }
-                .select-wrap {
-                    display: flex;
-                    margin: 10px 0;
-                    .select-item {
-                        flex: 1;
-                        color: #666666;
-                        padding: 6px 0;
-                        text-align: center;
-                        background: #f5f5f5;
-                        border-radius: 5px;
-                        &.active {
-                            color: #2199f8;
-                            background: #e0f1fe;
-                        }
-                    }
-                    .select-item + .select-item {
-                        margin-left: 12px;
+            .select-wrap {
+                display: flex;
+                width: calc(100% - 120px);
+                .select-item {
+                    margin-left: 12px;
+                    flex: 1;
+                    color: #666666;
+                    padding: 6px 0;
+                    text-align: center;
+                    background: #f5f5f5;
+                    border-radius: 5px;
+                    &.active {
+                        color: #2199f8;
+                        background: #e0f1fe;
                     }
                 }
             }
-            .photo-wrap {
-                width: 100%;
-                height: calc(100vh - 135px);
-                overflow: auto;
-            }
+        }
+        .photo-wrap {
+            width: 100%;
+            height: calc(100vh - 135px);
+            overflow: auto;
             .photo-list {
                 display: flex;
                 flex-wrap: wrap;
                 height: 100%;
                 .photo-item {
-                    width: 31.4%;
-                    height: 110px;
-                    border-radius: 8px;
-                    margin-right: 10px;
-                    margin-bottom: 8px;
-                    position: relative;
-                    .btn {
-                        position: absolute;
-                        right: 3px;
-                        top: 3px;
-                        font-size: 12px;
-                        background: rgba(0, 0, 0, 0.7);
-                        padding: 3px 10px;
-                        border-radius: 20px;
-                        color: #fff;
-                    }
-                    ::v-deep {
-                        .carousel-container {
-                            height: 100%;
-                            .carousel-wrapper {
-                                height: 100%;
-                                .carousel-item {
-                                    height: 100%;
-                                    .carousel-item img {
-                                        height: 100% !important;
-                                    }
-                                }
+                    .photo-item-top {
+                        display: flex;
+                        align-items: center;
+                        margin-top: 16px;
+                        .date-text {
+                            font-weight: 500;
+                            margin-right: 4px;
+                        }
+                        .weather-wrap{
+                            display: flex;
+                            align-items: center;
+                            .weather-item{
+                                display: flex;
+                                align-items: center;
+                                margin-left: 16px;
                             }
                         }
                     }
+                    .photo-item-bottom{
+                        margin-top: 12px;
+                        .region-text{
+                            width: 68px;
+                            text-align: center;
+                            font-weight: 500;
+                            padding: 5px 0;
+                            border-radius: 4px;
+                            border: 1px solid #BBBBBB;
+                        }
+                        .photo-img-wrap{
+                            margin-top: 8px;
+                        }
+                        // width: 31.4%;
+                        // height: 110px;
+                        // border-radius: 8px;
+                        // margin-right: 10px;
+                        // margin-bottom: 8px;
+                        // position: relative;
+                        // ::v-deep {
+                        //     .carousel-container {
+                        //         height: 100%;
+                        //         .carousel-wrapper {
+                        //             height: 100%;
+                        //             .carousel-item {
+                        //                 height: 100%;
+                        //                 .carousel-item img {
+                        //                     height: 100% !important;
+                        //                 }
+                        //             }
+                        //         }
+                        //     }
+                        // }
+                    }
                 }
                 .photo-item:nth-of-type(3n) {
                     margin-right: 0;

src/views/old_mini/message/detail.vue

@@ -1,33 +0,0 @@
-<template>
-    <div class="container">
-        <custom-header name="何清 (13380089473)"></custom-header>
-        <div class="content">
-        </div>
-    </div>
-</template>
-
-<script setup>
-import customHeader from "@/components/customHeader.vue";
-</script>
-
-<style lang="scss" scoped>
-.container {
-    width: 100%;
-    height: calc(100vh - 40px);
-    .content {
-        width: 100%;
-        height: 100%;
-        background: #F2F3F5;
-        position: relative;
-        img{
-            width: 100%;
-        }
-        .img{
-            position: absolute;
-            bottom: 20px;
-            left: 15px;
-            width: calc(100% - 30px);
-        }
-    }
-}
-</style>

src/views/old_mini/mine/components/activateList.vue

@@ -1,281 +0,0 @@
-<template>
-    <div class="list-wrap">
-        <div class="v-select-group">
-            <el-select class="v-select" v-model="value" placeholder="品种">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="生态指标">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="卡片状态">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </div>
-        <div class="list">
-            <div class="list-item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
-                <div class="tag" :style="{ background: item.status === 0 ? '#00B4D0' : '#C0C0C0' }">
-                    {{ item.status === 0 ? "待激活" : "已激活" }}
-                </div>
-                <div class="item-flex">
-                    <img src="@/assets/img/mine/img-photo.png" alt="" />
-                    <div class="item-text">
-                        <div class="name">
-                            <span>糯米糍</span>
-                            <div>综合评分:92分</div>
-                            <div>树龄:16年</div>
-                        </div>
-                        <div class="txt">单价：<span>15元/斤</span></div>
-                        <div class="txt">认养斤数：<span>20斤</span></div>
-                        <div class="button" v-if="item.status !== 0">查看物流</div>
-                    </div>
-                </div>
-                <div class="tips" v-if="item.status === 0">
-                    <span>赠送人：刘浩浩</span>
-                    <div class="btn-group">
-                        <div class="text-btn">取消分配</div>
-                        <div class="btn">提醒他</div>
-                    </div>
-                </div>
-                <template v-else>
-                    <div class="line"></div>
-                    <div class="info">
-                        <div class="avatar">
-                            <el-avatar
-                                :size="53"
-                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-                            />
-                            <div class="name">刘浩浩</div>
-                        </div>
-                        <el-divider class="divider" direction="vertical" />
-                        <div class="cont">
-                            <div class="li">送货时间<span>2025.03.22</span></div>
-                            <div class="li">电话<span>19871533165</span></div>
-                            <div class="li">地址<span class="van-ellipsis">湖北省武汉市富丽长信园1520室</span></div>
-                        </div>
-                    </div>
-                </template>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from "vue-router";
-const router = useRouter();
-
-const value = ref('')
-const options = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  },
-]
-
-const list = [
-    {
-        status: 0,
-    },
-    {
-        status: 0,
-    },
-    {
-        status: 1,
-    },
-];
-
-//点击卡片事件
-const handleItem = ({status}) =>{
-    if(status){
-        router.push('/active_detail')
-    }else{
-        router.push('/adopt_detail')
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.list-wrap {
-    margin: 0 12px;
-    .list {
-        width: 100%;
-        height: 100%;
-        margin-top: 12px;
-        .list-item {
-            border-radius: 8px;
-            background: #fff;
-            padding: 12px;
-            position: relative;
-            .item-flex {
-                display: flex;
-            }
-            img {
-                width: 68px;
-                height: 68px;
-                background: red;
-                border-radius: 8px;
-                margin-right: 12px;
-            }
-            .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;
-                    }
-                    div {
-                        margin-left: 5px;
-                        border-radius: 4px;
-                        font-size: 10px;
-                        padding: 0 4px;
-                        border: 1px solid #00BEDB;
-                        color: #00bedb;
-                    }
-                }
-                .txt{
-                    span{
-                        color: #000;
-                    }
-                }
-                .button{
-                    margin-top: 8px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    border: 1px solid #C6C6C6;
-                    border-radius: 3px;
-                    font-size: 12px;
-                    padding: 3px 10px;
-                    color: #575656;
-                    width: 86px;
-                    border-radius: 20px;
-                }
-            }
-            .tips {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                background: rgba(0, 190, 219, 0.09);
-                border-radius: 5px;
-                padding: 7px 8px;
-                color: #00bedb;
-                font-size: 12px;
-                margin-top: 8px;
-                .btn-group{
-                    display: flex;
-                    align-items: center;
-                    .text-btn{
-                        color: #959595;
-                        margin-right: 20px;
-                    }
-                    .btn {
-                        background: #00d5f6;
-                        color: #fff;
-                        padding: 5px 12px;
-                        border-radius: 20px;
-                    }
-                }
-            }
-            .tag {
-                position: absolute;
-                right: 0;
-                top: 0;
-                background: #00B4D0;
-                border-radius: 0 8px 0 8px;
-                color: #fff;
-                padding: 2px 6px;
-                font-size: 12px;
-            }
-            .line{
-                width: auto;
-                height: 1px;
-                background: rgba(0, 0, 0, 0.08);
-                margin: 10px;
-            }
-
-            .info{
-                border-radius: 5px;
-                background: rgba(0, 190, 219, 0.09);
-                padding: 6px 12px;
-                border: 1px solid #00BEDB;
-                display: flex;
-                align-items: center;
-                margin-top: 8px;
-                box-sizing: border-box;
-                .avatar{
-                    text-align: center;
-                    .name{
-                        background: #fff;
-                        border-radius: 20px;
-                        border: 1px solid #00D5F6;
-                        font-size: 12px;
-                        color: #00BEDB;
-                        padding: 1px 12px;
-                        position: relative;
-                        z-index: 2;
-                        margin-top: -12px;
-                    }
-                }
-                .divider{
-                    border-color: rgba(0, 190, 219, 0.52);
-                    margin: 0 16px;
-                    height: 50px;
-                }
-                .cont{
-                    .van-ellipsis{
-                        width: 162px;
-                        display: inline-block;
-                    }
-                    .li{
-                        color: rgba(0, 190, 219, 0.52);
-                        position: relative;
-                        margin-left: 10px;
-                        display: flex;
-                        align-items: center;
-                        font-size: 13px;
-                        &::before{
-                            content: '';
-                            position: absolute;
-                            top: 7px;
-                            left: -10px;
-                            width: 4px;
-                            height: 4px;
-                            border-radius: 50%;
-                            background: rgba(0, 190, 219, 0.52);
-                        }
-                        span{
-                            color: #00BEDB;
-                            margin-left: 5px;
-                        }
-                    }
-                }
-            }
-        }
-        .list-item + .list-item {
-            margin-top: 12px;
-        }
-    }
-}
-</style>

src/views/old_mini/mine/components/addPopup.vue

@@ -1,65 +0,0 @@
-<template>
-    <popup class="add-popup" round v-model:show="showAddPopup" :close-on-click-overlay="false">
-        <div class="popup-title">添加分组</div>
-        <el-input class="popup-input" v-model="input" placeholder="分组名" size="large" />
-        <div class="popup-button">
-            <div class="cancel" @click="showAddPopup = false">取消</div>
-            <div>添加</div>
-        </div>
-    </popup>
-</template>
-
-<script setup>
-import { ref, watch } from "vue";
-import { Popup} from "vant";
-
-const props = defineProps({
-    show:{
-        type:Boolean,
-        defalut:false
-    }
-})
-const input = ref("");
-
-const showAddPopup = ref(false)
-
-watch(()=>props.show,()=>{
-    input.value = ""
-    showAddPopup.value = true
-})
-</script>
-
-<style lang="scss" scoped>
-.add-popup{
-    width: 90%;
-    padding: 20px 16px;
-    .popup-title{
-        font-size: 18px;
-        font-weight: 500;
-        text-align: center;
-        margin-bottom: 12px;
-    }
-    .popup-input{
-        margin-bottom: 30px;
-    }
-    .popup-button{
-        display: flex;
-        padding-top: 20px;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
-        div{
-            flex: 1;
-            font-size: 16px;
-            padding: 9px;
-            border-radius: 4px;
-            background: #00D5F6;
-            color: #fff;
-            text-align: center;
-        }
-        .cancel{
-            margin-right: 20px;
-            background: #F3F3F3;
-            color: #000;
-        }
-    }
-}
-</style>

src/views/old_mini/mine/components/adoptList.vue

@@ -1,229 +0,0 @@
-<template>
-    <div class="list-wrap">
-        <div class="v-select-group">
-            <el-select class="v-select" v-model="value" placeholder="品种">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="树龄">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="农场">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </div>
-        <div class="list">
-            <div class="list-item" v-for="(item, index) in list" :key="index">
-                <div class="item-flex">
-                    <div class="tag">待生效</div>
-                    <img src="@/assets/img/mine/img-photo.png" alt="" />
-                    <div class="item-text">
-                        <div class="name">
-                            <span>糯米糍</span>
-                            <div>综合评分:92分</div>
-                            <div>树龄:16年</div>
-                        </div>
-                        <div class="txt">单价：<span>15元/斤</span></div>
-                        <div class="txt">分配截止时间：<span>2025.03.18</span></div>
-                        <div class="button">
-                            <img src="@/assets/img/mine/chat-dot.png" alt="">
-                            联系果园
-                        </div>
-                    </div>
-                </div>
-                <div class="box">
-                    <div class="personnel">
-                        <div class="text">
-                            已分配给<span> 15 </span>人
-                        </div>
-                        <div class="avatar-list">
-                            <span v-for="item in 3" :key="item">好友{{item}}<span v-show="item!==3">/</span></span>
-                            <el-icon class="icon" color="#B27E0D"><ArrowDownBold /></el-icon>
-                        </div>
-                    </div>
-                    <div class="progress">
-                        <span>待定制</span>
-                        <el-progress class="bar" :percentage="80" :format="format" :stroke-width="8" color="#FFAE00" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-const format = (percentage) => (`15/20`)
-
-const value = ref('')
-
-const options = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  },
-]
-
-const list = [
-    {
-        status: 0,
-    },
-    {
-        status: 0,
-    },
-    {
-        status: 1,
-    },
-];
-</script>
-
-<style lang="scss" scoped>
-.list-wrap {
-    margin: 0 12px;
-    .list {
-        width: 100%;
-        height: 100%;
-        margin-top: 12px;
-        .list-item {
-            border-radius: 5px;
-            background: #fff;
-            padding: 12px;
-            position: relative;
-            .item-flex {
-                display: flex;
-                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-                padding-bottom: 10px;
-                position: relative;
-                .tag{
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    background: #00B4D0;
-                    border-radius: 0 5px 0 5px;
-                    font-size: 12px;
-                    padding: 2px 7px;
-                    color: #fff;
-                }
-            }
-            img {
-                width: 68px;
-                height: 68px;
-                border-radius: 8px;
-                margin-right: 12px;
-            }
-            .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;
-                    }
-                    div {
-                        margin-left: 5px;
-                        border-radius: 4px;
-                        font-size: 10px;
-                        padding: 0 4px;
-                        border: 1px solid #00BEDB;
-                        color: #00bedb;
-                    }
-                }
-                .txt{
-                    span{
-                        color: #000;
-                    }
-                }
-                .button{
-                    margin-top: 8px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    border: 1px solid #C6C6C6;
-                    border-radius: 3px;
-                    font-size: 12px;
-                    padding: 3px 10px;
-                    color: #575656;
-                    width: 86px;
-                    img{
-                        width: 13px;
-                        height: 12px;
-                        margin-right: 3px;
-                    }
-                }
-            }
-            .box {
-                border-radius: 8px;
-                padding: 8px;
-                border: 1px solid rgba(255, 196, 0, 0.48);
-                font-size: 12px;
-                margin-top: 8px;
-                background: rgba(255, 196, 0, 0.1);
-                .personnel{
-                    background: linear-gradient(60deg,#FFCD26,#fff);
-                    border-radius: 20px;
-                    display: flex;
-                    align-items: center;
-                    font-size: 12px;
-                    padding: 1px 10px;
-                    color: #B27E0D;
-                    .avatar-list{
-                        display: flex;
-                        align-items: center;
-                        margin-left: 8px;
-                        span{
-                            color: #FFAE00;
-                        }
-                        .icon{
-                            margin-left: 8px;
-                        }
-                    }
-                }
-                .progress{
-                    display: flex;
-                    align-items: center;
-                    margin-top: 6px;
-                    font-size: 12px;
-                    color: #F0A400;
-                    .bar{
-                        width: calc(100% - 48px);
-                        margin-left: 8px;
-                    }
-                    ::v-deep{
-                        .el-progress-bar__outer{
-                            background: #fbe8b8;
-                        }
-                        .el-progress__text{
-                            font-size: 12px !important;
-                            min-width: auto;
-                            color: #F0A400;
-                        }
-                    }
-                }
-            }
-        }
-        .list-item + .list-item {
-            margin-top: 12px;
-        }
-    }
-}
-</style>

src/views/old_mini/mine/components/distributionList.vue

@@ -1,193 +0,0 @@
-<template>
-    <div class="list-wrap">
-        <div class="v-select-group">
-            <el-select class="v-select" v-model="value" placeholder="品种">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="树龄">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-            <el-select class="v-select" v-model="value" placeholder="农场">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-        </div>
-        <div class="list">
-            <div class="list-item" :class="{active:item.checked}" v-for="(item, index) in list" :key="index" @click="handleActive(index)">
-                <div class="item-flex">
-                    <img src="@/assets/img/mine/img-photo.png" alt="" />
-                    <div class="item-text">
-                        <div class="name">
-                            <span>糯米糍</span>
-                            <div class="mark">综合评分:92分</div>
-                            <div class="age">树龄:16年</div>
-                        </div>
-                        <div class="txt">单价：<span>15元/斤</span></div>
-                        <div class="txt time">
-                            <el-icon class="icon" size="15" color="#F87321"><WarningFilled /></el-icon>
-                            分配截止时间：<span>2025.03.18</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="progress">
-                    <span>待定制</span>
-                    <el-progress class="bar" :percentage="80" :format="format" :stroke-width="8" color="#FFAE00" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-const format = (percentage) => `15/20`;
-
-const value = ref("");
-
-const options = [
-    {
-        value: "Option1",
-        label: "Option1",
-    },
-    {
-        value: "Option2",
-        label: "Option2",
-    },
-    {
-        value: "Option3",
-        label: "Option3",
-    },
-    {
-        value: "Option4",
-        label: "Option4",
-    },
-    {
-        value: "Option5",
-        label: "Option5",
-    },
-];
-
-const list = ref([
-    {
-        status: 0,
-        checked:false
-    },
-    {
-        status: 0,
-        checked:false
-    },
-    {
-        status: 1,
-        checked:false
-    },
-]);
-
-const emit = defineEmits(['changeActive'])
-const handleActive = (index) =>{
-    list.value[index].checked = !list.value[index].checked
-    const arr = list.value.filter(item =>item.checked)
-    emit('changeActive',arr)
-}
-</script>
-
-<style lang="scss" scoped>
-.list-wrap {
-    margin: 0 12px;
-    .list {
-        width: 100%;
-        height: 100%;
-        margin-top: 12px;
-        .list-item {
-            border-radius: 5px;
-            background: #fff;
-            padding: 12px;
-            position: relative;
-            border: 2px solid rgba(0, 0, 0, 0.07);
-            &.active{
-                border-color: #32CBE2;
-            }
-            .item-flex {
-                display: flex;
-                align-items: center;
-            }
-            img {
-                width: 68px;
-                height: 68px;
-                border-radius: 8px;
-                margin-right: 12px;
-            }
-            .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;
-                    }
-                    div {
-                        margin-left: 5px;
-                        border-radius: 4px;
-                        font-size: 12px;
-                        padding: 2px 5px;
-                        &.mark {
-                            background: rgba(50, 203, 226, 0.25);
-                            color: #00bedb;
-                        }
-                        &.age {
-                            background: rgba(255, 196, 0, 0.2);
-                            color: #f0a400;
-                        }
-                    }
-                }
-                .txt {
-                    span {
-                        color: #000;
-                    }
-                }
-                .time {
-                    display: flex;
-                    align-items: center;
-                    .icon {
-                        margin-right: 4px;
-                    }
-                    span {
-                        color: #f87321;
-                    }
-                }
-            }
-
-            .progress {
-                display: flex;
-                align-items: center;
-                font-size: 12px;
-                color: #f0a400;
-                border-radius: 8px;
-                padding: 8px;
-                border: 1px solid #ffc400;
-                margin-top: 8px;
-                .bar {
-                    width: calc(100% - 48px);
-                    margin-left: 8px;
-                }
-                ::v-deep {
-                    .el-progress-bar__outer {
-                        background: #fbe8b8;
-                    }
-                    .el-progress__text {
-                        font-size: 12px !important;
-                        min-width: auto;
-                        color: #f0a400;
-                    }
-                }
-            }
-        }
-        .list-item + .list-item {
-            margin-top: 12px;
-        }
-    }
-}
-</style>

src/views/old_mini/mine/components/friendList.vue

@@ -1,495 +0,0 @@
-<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">
-                <img src="@/assets/img/mine/firend-icon.png" alt="" />
-                新增好友
-            </div>
-        </div>
-        <div class="list">
-            <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)" 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="@/assets/img/mine/img-photo.png" alt="" />
-                            <div class="item-text">
-                                <div class="name">
-                                    <span>{{ ele.name }}</span>
-                                    <el-icon color="#00BEDB" size="16"><Edit /></el-icon>
-                                </div>
-                                <div>电话：19875236548</div>
-                                <div>地址：湖北省武汉市富里唱鑫园5023</div>
-                            </div>
-                        </div>
-                    </div>
-                </collapse-item>
-            </collapse>
-        </div>
-        <div class="footer">
-            <div class="btn" @click="showPopup">新建分组</div>
-            <div class="btn big-btn" @click="handleShow">我要定制</div>
-        </div>
-    </div>
-    <!-- 添加分组弹窗 -->
-    <add-popup :show="showGroupPopup"></add-popup>
-    <!-- 定制详情 -->
-    <popup class="custom-popup" position="bottom" v-model:show="customShow">
-        <div class="popup-title">
-            <span>定制详情</span>
-        </div>
-        <div class="popup-cont">
-            <div class="select-row">
-                <span>平均斤数</span>
-                <el-select class="select" v-model="value" placeholder="请选择">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-            </div>
-            <div class="tips">总斤数为 <span>{{value2.length * 5}}</span> 斤</div>
-            <div class="select-row">
-                <span class="label">优先 分配果树</span>
-                <el-select class="select" v-model="value1" placeholder="请选择">
-                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-            </div>
-            <div class="select-row">
-                <span>分配列表({{value2.length}})</span>
-                <el-select class="select select-width" v-model="value2" placeholder="请选择" multiple collapse-tags :max-collapse-tags="1">
-                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-            </div>
-        </div>
-        <div class="popup-button">
-            <div class="cancel" @click="customShow = false">取消定制</div>
-            <div @click="handleDistribution">确认分配</div>
-        </div>
-    </popup>
-    <!-- 分配树木 -->
-    <popup class="distribution-popup" round position="bottom" closeable v-model:show="distributionShow">
-        <div class="title">请选择 优先分配果树</div>
-        <distribution-list class="distribution-cont" @changeActive="changeActive"></distribution-list>
-        <div class="button-wrap">
-            <div class="button" @click="handleOk">确认</div>
-        </div>
-    </popup>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { Collapse, CollapseItem, Popup } from "vant";
-import distributionList from "./distributionList.vue";
-import { useRouter } from "vue-router";
-import { ElMessage } from 'element-plus'
-import addPopup from "../components/addPopup.vue";
-const router = useRouter();
-
-//新建分组
-const showGroupPopup = ref(false);
-const showPopup = () => {
-    showGroupPopup.value = true;
-};
-
-//我要定制
-const customShow = ref(false);
-const handleShow = () => {
-    value.value = 'Option1'
-    value1.value = ''
-    value2.value = ''
-    customShow.value = true;
-};
-const input = ref("");
-const distributionShow = ref(false);
-
-// 果树选中的监听事件
-const checkedList = ref([])
-const changeActive = (arr) =>{
-    checkedList.value = arr
-}
-
-const handleOk = () =>{
-    if(checkedList.value.length){
-        customShow.value = false
-        distributionShow.value = false
-    }else{
-        ElMessage.warning('请选择果树!')
-    }
-}
-
-//确认分配
-const handleDistribution = () =>{
-    if(value2.value.length){
-        distributionShow.value = true
-    }else{
-        ElMessage.warning('请选择好友!')
-    }
-}
-
-const value = ref('Option1')
-const options = [
-  {
-    value: 'Option1',
-    label: '5斤/人',
-  },
-  {
-    value: 'Option2',
-    label: '10斤/人',
-  },
-  {
-    value: 'Option2',
-    label: '15斤/人',
-  },
-]
-
-const value1 = ref('')
-const options1 = [
-  {
-    value: 'Option1',
-    label: '5斤/人',
-  },
-  {
-    value: 'Option2',
-    label: '10斤/人',
-  },
-  {
-    value: 'Option2',
-    label: '15斤/人',
-  },
-]
-
-const value2 = ref('')
-const options2 = [
-  {
-    value: '1',
-    label: '好友1',
-  },
-  {
-    value: '2',
-    label: '好友2',
-  },
-  {
-    value: '3',
-    label: '好友3',
-  },
-]
-
-// 管理
-const hadnleManage = (value) => {
-    router.push(`/manage?name=${value.name}&total=${value.children.length}&isGroup=${value.isGroup}`);
-};
-
-const list = ref([
-    {
-        name: "常用列表",
-        id: "1",
-        isGroup: 0,
-        children: [
-            {
-                id: "3",
-                name: "糯米糍",
-            },
-            {
-                id: "4",
-                name: "桂味",
-            },
-        ],
-    },
-    {
-        name: "未分组标签好友",
-        id: "2",
-        isGroup: 1,
-        children: [
-            {
-                id: "5",
-                name: "井冈红糯",
-            },
-            {
-                id: "6",
-                name: "测试",
-            },
-        ],
-    },
-    {
-        name: "其他列表",
-        id: "3",
-        children: [],
-    },
-]);
-
-const activeNames = ref([0]);
-</script>
-
-<style lang="scss" scoped>
-.list-wrap {
-    margin: 0 12px;
-    .list-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .search {
-            width: 90px;
-            margin-right: 10px;
-            --el-input-placeholder-color: #00bedb;
-            ::v-deep {
-                .el-input__wrapper {
-                    box-shadow: none;
-                    border: 1px solid #18d2ef;
-                    background: transparent;
-                    border-radius: 20px;
-                }
-                .el-input__prefix,
-                .el-input__inner {
-                    color: #00bedb;
-                }
-            }
-        }
-        .button {
-            width: calc(100% - 100px);
-            background: #c8f1f7;
-            color: #00bedb;
-            border: 1px solid #00d5f6;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 8px;
-            border-radius: 20px;
-            img {
-                width: 20px;
-                height: 17px;
-                margin-right: 6px;
-            }
-        }
-    }
-    .list {
-        width: 100%;
-        height: 100%;
-        margin-top: 12px;
-        .text {
-            color: #17c2dd;
-        }
-        ::v-deep {
-            .van-cell {
-                border-radius: 5px 5px 0 0;
-                justify-content: space-between;
-                .van-cell__value {
-                    flex: none;
-                }
-                .van-cell__title {
-                    display: flex;
-                    align-items: center;
-                    .icon {
-                        margin-right: 3px;
-                        color: #bfbfbf;
-                        font-size: 16px;
-                    }
-                    .span {
-                        color: rgba(0, 0, 0, 0.4);
-                        margin-left: 10px;
-                    }
-                }
-            }
-            .van-collapse-item__title--expanded {
-                .van-cell__title {
-                    .icon {
-                        transform: rotate(90deg);
-                    }
-                }
-            }
-            .van-collapse-item + .van-collapse-item {
-                margin-top: 12px;
-            }
-        }
-        .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;
-            }
-            .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 {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-top: 12px;
-        .btn {
-            font-size: 12px;
-            color: #7f7f7f;
-            padding: 5px 45px;
-            background: rgba(201, 201, 201, 0.27);
-            border-radius: 20px;
-        }
-        .big-btn {
-            font-size: 14px;
-            color: #fff;
-            padding: 8px 80px;
-            margin-top: 25px;
-            background: linear-gradient(160deg, #18e0ff, #16afc6);
-        }
-    }
-}
-// 定制详情
-.custom-popup {
-    width: calc(100% - 20px);
-    border-radius: 8px;
-    padding: 10px 14px;
-    box-sizing: border-box;
-    bottom: 50px;
-    left: 10px;
-    border: 1px solid #00bedb;
-    background: linear-gradient(0deg, #ffffff 60%, #8ef0ff 100%);
-    .popup-title {
-        font-size: 16px;
-        font-weight: 500;
-        margin-bottom: 12px;
-        position: relative;
-        span {
-            position: relative;
-            z-index: 2;
-        }
-        &::before {
-            content: "";
-            position: absolute;
-            width: 90px;
-            height: 8px;
-            border-radius: 8px;
-            background: linear-gradient(120deg, #18e0ff, rgb(255, 255, 255, 0));
-            bottom: 0;
-        }
-    }
-    .popup-cont {
-        .select-row + .select-row{
-            margin-top: 5px;
-        }
-        .select-row {
-            border: 1px solid rgba(0, 190, 219, 0.8);
-            padding: 3px 0 3px 10px;
-            border-radius: 5px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: #fff;
-            .label{
-                color: #00BEDB;
-            }
-            .select{
-                width: 32%;
-                ::v-deep{
-                    .el-select__wrapper{
-                        box-shadow: none;
-                    }
-                    .el-select__caret,.el-select__placeholder{
-                        color: #00BEDB;
-                        text-align: right;
-                    }
-                    .el-select__placeholder.is-transparent{
-                        color: rgba(0, 190, 219, 0.3);
-                    }
-                }
-            }
-            .select-width{
-                width: 48%;
-            }
-        }
-        .tips{
-            font-size: 12px;
-            margin: 6px;
-            span{
-                color: #00BEDB;
-            }
-        }
-    }
-    .popup-button {
-        display: flex;
-        padding-top: 12px;
-        border-top: 1px solid rgba(0, 190, 219, 0.17);
-        div {
-            font-size: 12px;
-            width: calc(100% - 108px - 20px);
-            padding: 8px;
-            border-radius: 20px;
-            background: #00d5f6;
-            color: #fff;
-            text-align: center;
-            border: 1px solid transparent;
-        }
-        .cancel {
-            width: 108px;
-            margin-right: 20px;
-            background: #f4f4f4;
-            border: 1px solid #e5e4e4;
-            color: #aaaaaa;
-        }
-    }
-}
-.distribution-popup {
-    padding-top: 30px;
-    height: 60%;
-    overflow: auto;
-    bottom: 50px;
-    .title {
-        margin-left: 12px;
-        font-size: 16px;
-        font-weight: 500;
-        margin-bottom: 12px;
-    }
-    .distribution-cont{
-        height: calc(100% - 95px);
-        overflow-y: auto;
-    }
-    .button-wrap{
-        background: #fff;
-        padding: 15px;
-        display: flex;
-        justify-content: center;
-        .button{
-            background: #18E0FF;
-            color: #fff;
-            font-size: 12px;
-            padding: 7px 86px;
-            border-radius: 20px;
-        }
-    }
-}
-</style>

src/views/old_mini/mine/index.vue

@@ -1,109 +1,175 @@
 <template>
-    <div class="container-bg">
-        <div class="container" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
+    <div class="mine-index">
+        <div class="mine-header">
+            <el-avatar
+                class="avatar"
+                :size="54"
+                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+            />
             <div class="user-info">
-                <el-avatar
-                    class="avatar"
-                    :size="58"
-                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-                />
-                <span class="name">陈晓晓</span>
+                <span class="user-name">听妈妈的话</span>
+                <div class="user-day">这是您使用飞鸟有味的第15天</div>
             </div>
-            <div class="tabs">
-                <div
-                    :class="['tab-item', { active: active === index }]"
-                    v-for="(item, index) in tabsList"
+        </div>
+        <div class="mine-content">
+            <div class="grid-group">
+                <div 
+                    class="grid-item" 
+                    v-for="(item, index) in gridItems" 
+                    :key="index"
+                    @click="handleGridClick(item)"
+                >
+                    <div class="grid-title">
+                        <span>{{ item.title }}</span>
+                        <el-icon><ArrowRight /></el-icon>
+                    </div>
+                    <span class="grid-desc">{{ item.desc }}</span>
+                </div>
+            </div>
+            <div class="cell-group">
+                <div 
+                    class="cell-item" 
+                    v-for="(item, index) in cellItems" 
                     :key="index"
-                    @click="handleActive(index)"
+                    @click="handleCellClick(item)"
                 >
-                    {{ item }}
+                    <span class="item-title">{{ item.title }}</span>
+                    <el-icon class="item-arrow"><ArrowRight /></el-icon>
                 </div>
             </div>
-            <adopt-list v-if="active===0"></adopt-list>
-            <friend-list v-else-if="active===1"></friend-list>
-            <activate-list v-else></activate-list>
         </div>
     </div>
 </template>
-
 <script setup>
-import { useStore } from "vuex";
-import { useRouter } from "vue-router";
-import { computed, ref } from "vue";
-import activateList from "./components/activateList.vue";
-import adoptList from "./components/adoptList.vue";
-import friendList from "./components/friendList.vue";
+import { Cell, CellGroup } from "vant";
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
 const router = useRouter();
 
-const store = useStore();
-const tabBarHeight = computed(() => store.state.home.tabBarHeight);
+// 网格项数据
+const gridItems = ref([
+    {
+        title: '我的农场',
+        desc: '查看农场列表',
+        path: '/farm/list'
+    },
+    {
+        title: '我的消息',
+        desc: '查看未读信息',
+        path: '/message'
+    },
+    {
+        title: '农事记录',
+        desc: '查看历史农事',
+        path: '/order/list'
+    }
+]);
+
+// 单元格项数据
+const cellItems = ref([
+    {
+        title: '联系客服',
+        path: '/customer-service'
+    },
+    {
+        title: '帮助中心',
+        path: '/help'
+    },
+    {
+        title: '退出登录',
+        path: '/logout'
+    }
+]);
 
-const active = ref(0);
-const tabsList = ["认养列表", "好友列表", "激活列表"];
-const handleActive = (index) => {
-    active.value = index;
+// 处理网格项点击
+const handleGridClick = (item) => {
+    if (item.path) {
+        router.push(item.path);
+    }
 };
-</script>
 
+// 处理单元格项点击
+const handleCellClick = (item) => {
+    if (item.path) {
+        if (item.path === '/logout') {
+            // 退出登录逻辑
+            console.log('退出登录');
+            // 这里可以添加退出登录的具体逻辑
+        } else {
+            router.push(item.path);
+        }
+    }
+};
+</script>
 <style lang="scss" scoped>
-.container-bg {
-    position: absolute;
+.mine-index {
     width: 100%;
-    height: calc(100% - 50px);
-    z-index: 1;
-    background: #f2f3f5;
-}
-.container {
-    width: 100%;
-    height: calc(100% - 50px);
-    position: relative;
-    background: url("@/assets/img/mine/mine-bg.png") no-repeat center center / 100% 100%;
-    padding: 20px 0;
+    height: 100vh;
     box-sizing: border-box;
-    z-index: 2;
-    overflow-y: auto;
-
-    .user-info {
-        margin: 0 12px;
+    padding: 20px 16px;
+    background: url("@/assets/img/mine/mine-bg.png") no-repeat center center / 100% 100%;
+    .mine-header {
+        width: 100%;
         display: flex;
         align-items: center;
         .avatar {
             border: 1px solid #fff;
-            margin-right: 10px;
+            margin-right: 12px;
         }
-        .name {
-            font-size: 18px;
+        .user-info {
+            font-size: 20px;
+            .user-name {
+                font-weight: 500;
+            }
+            .user-day {
+                font-size: 12px;
+                color: rgba(0, 0, 0, 0.5);
+            }
         }
     }
-    .tabs {
-        display: flex;
-        margin: 18px 0 14px 0;
-        .tab-item {
-            border-radius: 20px;
-            font-size: 16px;
-            color: #999999;
-            flex: 1;
-            padding: 4px;
-            text-align: center;
-            &.active {
-                color: #000000;
-                font-weight: 500;
-                position: relative;
-                display: flex;
-                justify-content: center;
-                &::before {
-                    content: "";
-                    position: absolute;
-                    width: 29px;
-                    height: 4px;
-                    background: #00bedb;
-                    border-radius: 20px;
-                    bottom: -4px;
+    .mine-content {
+        margin-top: 20px;
+        .grid-group {
+            display: flex;
+            align-items: center;
+            .grid-item {
+                background-color: #fff;
+                border-radius: 14px;
+                padding: 10px 0 10px 10px;
+                color: #000;
+                font-size: 16px;
+                flex: 1;
+                .grid-title {
+                    display: flex;
+                    align-items: center;
+                    font-weight: 500;
+                    margin-bottom: 6px;
+                    span{
+                        margin-right: 10px;
+                    }
+                }
+                .grid-desc {
+                    font-size: 12px;
+                    color: rgba(0, 0, 0, 0.2);
                 }
             }
+            .grid-item + .grid-item {
+                margin-left: 10px;
+            }
         }
-        .tab-item + .tab-item {
-            margin-left: 16px;
+        .cell-group {
+            .cell-item {
+                margin-top: 10px;
+                background-color: #fff;
+                border-radius: 14px;
+                padding: 13px 10px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: #000;
+                font-size: 16px;
+            }
         }
     }
 }

src/views/old_mini/message/index.vue → src/views/old_mini/mine/pages/message.vue

@@ -1,56 +1,43 @@
 <template>
-    <div class="container" :style="{ height: `calc(100vh - ${tabBarHeight}px)` }">
+    <div class="message-page">
+        <custom-header name="我的消息" bgColor="#f7f7f7"></custom-header>
         <div class="message-list">
             <div class="message-item" v-for="(item, index) in messageList" :key="index" @click="handleItem(item)">
                 <div class="message">
-                    <img class="img" v-if="item.type!=='message'" :src="require(`@/assets/img/message/${item.type}.png`)" alt="" />
-                    <img class="img" v-else src="@/assets/img/message/bqc-img.png" alt="">
+                    <badge v-show="item.num" :content="item.num" max="99" :offset="[-15, 5]">
+                        <img class="img" v-if="item.type!=='message'" :src="require(`@/assets/img/mine/${item.type}.png`)" alt="" />
+                        <img class="img" v-else src="@/assets/img/mine/expert.png" alt="">
+                    </badge>
                     <div class="info">
                         <span class="name">{{item.name}}</span>
                         <div class="van-ellipsis">{{item.desc}}</div>
                     </div>
                 </div>
-                <div class="date-time">
-                    <div>{{item.time}}</div>
-                    <badge v-show="item.num" class="badge" :content="item.num" max="99"></badge>
-                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { useStore } from "vuex";
 import { Badge } from "vant";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
+import customHeader from "@/components/customHeader.vue";
 const router = useRouter();
 
-const store = useStore();
-const tabBarHeight = computed(() => store.state.home.tabBarHeight);
-
 const messageList = ref([
     {
-        name: "系统消息",
-        type: "system",
-        desc: "春季荔枝园果树认养活动火热进行11111111111222",
-        time: "03/22 09:36",
+        name: "指导专家咨询",
+        type: "expert",
+        desc: "从化荔博园：",
         num: 1,
     },
     {
-        name: "物流消息",
-        type: "logistics",
-        desc: "您的包裹已送达，注意查收哦~",
-        time: "03/21 16:21",
+        name: "农资农服咨询",
+        type: "agricultural",
+        desc: "农资农服：",
         num: 1,
     },
-    {
-        name: "何清 (13380089473)",
-        type: "message",
-        desc: "好的！非常感谢，我已了解。",
-        time: "03/22 12:07",
-        num: 0,
-    },
 ]);
 
 const handleItem = ({type,name}) =>{
@@ -61,22 +48,26 @@ const handleItem = ({type,name}) =>{
 </script>
 
 <style lang="scss" scoped>
-.container {
+.message-page {
     position: relative;
     width: 100%;
-    height: calc(100vh - 50px);
-    padding: 30px 20px 0 20px;
+    height: 100vh;
     box-sizing: border-box;
+    background-color: #f7f7f7;
     .message-list {
         width: 100%;
         height: 100%;
         overflow-y: auto;
+        padding: 12px;
+        box-sizing: border-box;
         .message-item {
             display: flex;
             justify-content: space-between;
-
+            background-color: #fff;
+            border-radius: 14px;
+            padding: 10px;
             .message {
-                width: calc(100% - 64px - 58px - 10px);
+                width: calc(100% - 64px);
                 display: flex;
                 align-items: center;
                 .img {
@@ -95,20 +86,9 @@ const handleItem = ({type,name}) =>{
                     }
                 }
             }
-            .date-time{
-                color: #BBBBBB;
-                font-size: 12px;
-                display: flex;
-                flex-direction: column;
-                align-items: flex-end;
-                margin-top: 4px;
-                .badge{
-                    margin: 20px 10px -6px 0;
-                }
-            }
         }
         .message-item + .message-item {
-            margin-top: 28px;
+            margin-top: 12px;
         }
     }
 }