feat:添加首页的浮动面板

src/router/globalRoutes.js

@@ -26,12 +26,6 @@ export default [
         component: () => import("@/views/old_mini/home/wonderland/index.vue"),
     },
     {
-        path: "/garden_detail",
-        name: "GardenDetail",
-        meta: { keepAlive: true },
-        component: () => import("@/views/old_mini/home/gardenDetail/index.vue"),
-    },
-    {
         path: "/farm",
         name: "Farm",
         meta: { showTabbar: true, keepAlive: true },

src/views/old_mini/home/components/farmFloatingPanel.vue

@@ -1,16 +0,0 @@
-<template>
-    <floating-panel class="floating-panel" v-model:height="height" :anchors="anchors"> 12313 </floating-panel>
-</template>
-
-<script setup>
-import { FloatingPanel } from "vant";
-import { ref } from "vue";
-
-const anchors = [310, Math.round(0.93 * window.innerHeight)];
-const height = ref(anchors[0]);
-</script>
-
-<style lang="scss" scoped>
-.floating-panel {
-}
-</style>

src/views/old_mini/home/components/homeFloatingPanel.vue

@@ -1,33 +1,6 @@
 <template>
     <floating-panel class="floating-panel" v-model:height="height" :anchors="anchors">
-        <div class="v-select-defalut-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">
-                <img class="level-icon" :src="require(`@/assets/img/home/level-${index+1}.png`)" alt="">
-                <img class="img" :src="require(`@/assets/img/home/${item.img}-img.${item.img==='wly'?'jpg':'png'}`)" alt="" />
-                <div class="item-text">
-                    <div class="name">
-                        <span>{{ item.name }}</span>
-                        <div class="mark">综合评分：{{item.mask}}分</div>
-                        <div class="age">生态分数：{{item.mask1}}分</div>
-                    </div>
-                    <div class="txt">主要品种：<span>{{item.pz}}</span></div>
-                    <div class="txt progress">待认养数量：
-                        <el-progress class="bar" :percentage="70" :stroke-width="8" color="#00BEDB" :format="format" />
-                    </div>
-                </div>
-            </div>
-        </div>
+      123
     </floating-panel>
 </template>
 
@@ -36,150 +9,17 @@ import { FloatingPanel } from "vant";
 import { useStore } from "vuex";
 import { computed, ref } from "vue";
 
-const format = (percentage) => (`100/200`)
-
 const store = useStore();
 // const tabBarHeight = computed(() => store.state.home.tabBarHeight);
 const tabBarHeight = ref(localStorage.getItem('tabBarHeight')*1 || 50);
 
-const defalutHeight = ref(tabBarHeight.value + 30);
-const anchors = [defalutHeight.value, 300 + tabBarHeight.value, Math.round(1 * window.innerHeight)];
-const height = ref(anchors[1]);
-
-const list = [
-    {
-        name: "柏桥村",
-        mask:96.8,
-        mask1:93.2,
-        pz:'白糖罂，妃子笑，桂味，糯米糍',
-        img:'bqc'
-    },
-    {
-        name: "荔博园",
-        mask:92.1,
-        mask1:91.3,
-        pz:'桂味、糯米糍，井岗红糯，槐枝',
-        img:'lby'
-    },
-    {
-        name: "莞荔园",
-        mask:91.6,
-        mask1:91.1,
-        pz:'桂味、糯米糍，观音绿、冰荔',
-        img:'wly'
-    },
-];
-
-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 defalutHeight = ref(tabBarHeight.value + 34);
+const anchors = ref([defalutHeight.value, 310 + tabBarHeight.value, Math.round(1 * window.innerHeight)]);
+const height = ref(anchors.value[1]);
 </script>
 
 <style lang="scss" scoped>
 .floating-panel {
-    ::v-deep {
-        .van-floating-panel__content {
-            background: #f2f3f5;
-        }
-    }
-    .v-select-defalut-group {
-        border-bottom: 1px solid #f5f5f5;
-        padding: 0 12px 12px 12px;
-        background: #fff;
-    }
-    .list {
-        width: 100%;
-        .list-item {
-            background: #fff;
-            padding: 12px;
-            position: relative;
-            display: flex;
-            align-items: center;
-            .level-icon{
-                width: 28px;
-                height: 24px;
-                position: absolute;
-                top: 5px;
-                left: 5px;
-            }
-            .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: 6px;
-                    }
-                    div {
-                        margin-left: 4px;
-                        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;
-                    }
-                }
-                .progress{
-                    display: flex;
-                    align-items: center;
-                    .bar{
-                        width: calc(100% - 72px);
-                        ::v-deep{
-                            .el-progress__text{
-                                font-size: 12px !important;
-                                min-width: auto;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .list-item + .list-item {
-            margin-top: 12px;
-        }
-    }
+    
 }
 </style>

src/views/old_mini/home/gardenDetail/index.vue

@@ -1,367 +0,0 @@
-<template>
-    <div class="detail-page">
-        <custom-header name="溯源详情"></custom-header>
-        <div class="detail-content">
-            <div class="detail-main">
-                <div class="bubble-box">
-                    <div class="bubble old">
-                        <span>16年</span>
-                        <div>树龄</div>
-                    </div>
-                    <div class="bubble pz">
-                        <span>桂味</span>
-                        <div>品种</div>
-                    </div>
-                    <div class="bubble code">
-                        <span>AA123AA123</span>
-                        <div>唯一编码</div>
-                    </div>
-                    <div class="bubble cl">
-                        <span>100斤</span>
-                        <div>高质产量</div>
-                    </div>
-                    <div class="bubble date">
-                        <span>2025.06.08</span>
-                        <div>上市时间</div>
-                    </div>
-                    <div class="bubble zb">
-                        <span>92分</span>
-                        <div>生态指标</div>
-                    </div>
-                </div>
-                <img class="tree" src="@/assets/img/home/tree-icon.png" alt="">
-                <div class="photo-box">
-                    <div class="photo-title">
-                        <span>巡园照片</span>
-                        <span class="more" @click="handleMore">更多></span>
-                    </div>
-                    <div class="photo-list">
-                        <div class="photo-item" v-for="(item,index) in photoList" :key="index">
-                            <img class="img" :src="require(`@/assets/img/home/photo-img-${index}.jpeg`)" alt="">
-                            <div class="date">{{item.date}}</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="source-wrap">
-                <div class="tabs">
-                    <div class="tabs-item" :class="{active:active===index}" v-for="(item,index) in tabsList" :key="index" @click="handleActive(index)">{{item}}</div>
-                </div>
-                <div class="list-item" v-for="(ele, idx) in sourceList" :key="idx">
-                    <div class="item-flex">
-                        <div class="photo">
-                            <img src="@/assets/img/home/source.png" alt="" />
-                            <div class="date">{{ele.date}}</div>
-                        </div>
-                        <div class="item-text">
-                            <div class="item-title">{{ ele.name }}</div>
-                            <div class="name">
-                                触发原因：<span class="val">{{ ele.reason }}</span>
-                            </div>
-                            <div class="name">
-                                农事效果：<span class="val van-ellipsis">{{ ele.effect }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import customHeader from "@/components/customHeader.vue";
-import { useRouter } from "vue-router";
-const router = useRouter();
-
-const active = ref(0)
-const tabsList = ["全部","标准","气象"]
-const handleActive = (index) =>{
-    active.value = index
-    handleItem(index)
-}
-
-const photoList = ref([
-    {
-        date:'2025.06.07'
-    },
-    {
-        date:'2025.05.28'
-    },
-    {
-        date:'2025.05.25'
-    },
-    {
-        date:'2025.05.22'
-    },
-    {
-        date:'2025.05.20'
-    }
-])
-
-const sourceList1 = ref([
-    { name: "梢期根肥", reason: "梢期需需要营养时机", effect: "增强树体营养，促进新梢健壮，增强病虫抗性",date:'2024.07.14' },
-    { name: "壮果根肥", reason: "果期要营养时机", effect: "促进果实快速膨大，提升单果重；减少生理落果与裂果，改善果实均匀度；增强抗高温/暴雨能力" ,date:'2024.05.07'},
-    { name: "壮花追肥", reason: "花期需要营养时机", effect: "促进花穗健壮，提高雌花比例；增强花期抗低温/阴雨能力" ,date:'2024.03.07'},
-    { name: "梢期高温干旱", reason: "梢期需需要营养时机", effect: "每日早晚树冠喷水降温（避开正午高温），以缓解高温抑制新梢生长，促进新梢抽发整齐、根系吸水效率提升",date:'2024.10.26' },
-    { name: "果期阴雨寡照", reason: "果期要营养时机", effect: "补充叶面肥，增强光合作用，促进养分转运，避免光照不足影响，确保果实饱满、甜度高、风味佳" ,date:'2024.05.24'},
-    { name: "花期连续阴雨", reason: "花期需要营养时机", effect: "雨停间隙人工施粉或放蜂授粉，轻摇树枝排出花穗积水，防止雨水冲刷花粉和霜疫霉病蔓延，确保坐果率恢复" ,date:'2024.04.01'},
-]);
-
-const sourceList = ref([
-    { name: "梢期根肥", reason: "梢期需需要营养时机", effect: "增强树体营养，促进新梢健壮，增强病虫抗性",date:'2024.07.14' },
-    { name: "壮果根肥", reason: "果期要营养时机", effect: "促进果实快速膨大，提升单果重；减少生理落果与裂果，改善果实均匀度；增强抗高温/暴雨能力" ,date:'2024.05.07'},
-    { name: "壮花追肥", reason: "花期需要营养时机", effect: "促进花穗健壮，提高雌花比例；增强花期抗低温/阴雨能力" ,date:'2024.03.07'},
-    { name: "梢期高温干旱", reason: "梢期需需要营养时机", effect: "每日早晚树冠喷水降温（避开正午高温），以缓解高温抑制新梢生长，促进新梢抽发整齐、根系吸水效率提升",date:'2024.10.26' },
-    { name: "果期阴雨寡照", reason: "果期要营养时机", effect: "补充叶面肥，增强光合作用，促进养分转运，避免光照不足影响，确保果实饱满、甜度高、风味佳" ,date:'2024.05.24'},
-    { name: "花期连续阴雨", reason: "花期需要营养时机", effect: "雨停间隙人工施粉或放蜂授粉，轻摇树枝排出花穗积水，防止雨水冲刷花粉和霜疫霉病蔓延，确保坐果率恢复" ,date:'2024.04.01'},
-]);
-
-const handleItem = (index) =>{
-    if(index===0){
-        sourceList.value = sourceList1.value
-    }
-    if(index===1){
-        sourceList.value = sourceList1.value.slice(0,3)
-    }
-    if(index===2){
-        sourceList.value = sourceList1.value.slice(3)
-    }
-}
-
-const handleMore = () =>{
-    router.push('/photo')
-}
-</script>
-
-<style lang="scss" scoped>
-.detail-page {
-    position: relative;
-    width: 100%;
-    height: 100vh;
-    .detail-content {
-        height: calc(100% - 40px);
-        overflow: auto;
-        .detail-main{
-            width: 100%;
-            height: 420px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: flex-end;
-            background: url("@/assets/img/home/sy-bg.png") no-repeat center center / 100% 100%;
-            .bubble-box{
-                position: relative;
-                width: 100%;
-                .bubble{
-                    color: #fff;
-                    padding: 20px 24px;
-                    font-size: 12px;
-                    text-align: center;
-                    background: url("@/assets/img/home/bubble-bg.png") no-repeat center center / 100% 100%;
-                    span{
-                        font-size: 13px;
-                        font-weight: 500;
-                    }
-                    &.pz{
-                        position: absolute;
-                        bottom: 55px;
-                        left: 160px;
-                        padding: 22px 28px;
-                    }
-                    &.old{
-                        position: absolute;
-                        left: 100px;
-                        bottom: -8px;
-                    }
-                    &.code{
-                        position: absolute;
-                        left: 10px;
-                        bottom: -95px;
-                        padding: 38px 16px;
-                    }
-                    &.cl{
-                        position: absolute;
-                        left: 25px;
-                        bottom: 30px;
-                        padding: 24px 18px;
-                    }
-                    &.date{
-                        position: absolute;
-                        right: 60px;
-                        bottom: -15px;
-                        padding: 32px 16px;
-                    }
-                    &.zb{
-                        position: absolute;
-                        right: 40px;
-                        bottom: -90px;
-                        padding: 24px 16px;
-                    }
-                }
-            }
-            .tree{
-                width: 160px;
-                height: 153px;
-            }
-            .photo-box{
-                width: 90%;
-                margin-top: -22px;
-                margin-bottom: 22px;
-                padding: 12px 8px;
-                background: url("@/assets/img/home/photo-bg.png") no-repeat center center / 100% 100%;
-                .photo-title{
-                    display: flex;
-                    justify-content: space-between;
-                    color: #FFFFFF;
-                    font-size: 12px;
-                    margin-bottom: 6px;
-                    .more{
-                        color: #BBBBBB;
-                    }
-                }
-                .photo-list{
-                    display: flex;
-                    .photo-item{
-                        position: relative;
-                        .img{
-                            width: 58px;
-                            height: 58px;
-                            border: 1px solid rgba(255, 255, 255, 0.6);
-                            border-radius: 10px;
-                            object-fit: cover;
-                        }
-                        .date{
-                            position: absolute;
-                            color: #DDDDDD;
-                            font-size: 10px;
-                            bottom: 1px;
-                            left: 1px;
-                            background: rgba(0, 0, 0, 0.6);
-                            width: calc(100% - 2px);
-                            padding: 2px 4px;
-                            box-sizing: border-box;
-                            border-radius: 0 0 10px 10px;
-                        }
-                    }
-                    .photo-item + .photo-item{
-                        margin-left: 8px;
-                    }
-                }
-            }
-        }
-        .source-wrap {
-            background: #f2f3f5;
-            margin-top: -8px;
-            border-radius: 10px 10px 0 0;
-            .tabs{
-                background: #fff;
-                border-radius: 10px 10px 0 0;
-                display: flex;
-                padding: 18px 11px 16px 11px;
-                .tabs-item{
-                    padding: 6px;
-                    border-radius: 20px;
-                    color: #000000;
-                    flex: 1;
-                    text-align: center;
-                    border: 1px solid #DDDDDD;
-                    &.active{
-                        background: linear-gradient(180deg,#18E0FF,#00C5E3);
-                        color: #fff;
-                        border: none;
-                    }
-                }
-                .tabs-item + .tabs-item{
-                    margin-left: 8px;
-                }
-            }
-            .item-flex {
-                background: #fff;
-                padding: 12px;
-                border-radius: 5px;
-                .item-title {
-                    font-size: 16px;
-                    color: #000;
-                }
-            }
-            .list-item {
-                margin-top: 12px;
-            }
-        }
-
-        .item-flex {
-            display: flex;
-            align-items: center;
-        }
-        .photo {
-            width: 76px;
-            height: 76px;
-            margin-right: 12px;
-            position: relative;
-            img{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                border-radius: 8px;
-            }
-            .date{
-                position: absolute;
-                bottom: 0;
-                color: #fff;
-                font-size: 10px;
-                padding: 2px 13px;
-                background: linear-gradient(60deg,rgba(0, 0, 0, 0) 0% ,rgba(0, 0, 0, 0.5) 50% ,rgba(0, 0, 0, 0) 100%);
-            }
-        }
-        .item-text {
-            color: #999999;
-            font-size: 12px;
-            line-height: 1.6;
-            .name {
-                display: flex;
-                align-items: center;
-                .main-name {
-                    font-size: 16px;
-                    color: #000;
-                    font-weight: bold;
-                    padding-right: 10px;
-                }
-                div {
-                    margin-left: 5px;
-                    border-radius: 4px;
-                    font-size: 12px;
-                    padding: 2px 5px;
-                    &.mark {
-                        background: rgba(50, 203, 226, 0.25);
-                        color: #00bedb;
-                    }
-                    &.age {
-                        background: rgba(255, 196, 0, 0.2);
-                        color: #f0a400;
-                    }
-                }
-            }
-            .van-ellipsis{
-                width: 200px;
-            }
-            .txt {
-                span {
-                    color: #000;
-                }
-            }
-            .time {
-                display: flex;
-                align-items: center;
-                .icon {
-                    margin-right: 4px;
-                }
-                span {
-                    color: #f87321;
-                }
-            }
-        }
-    }
-}
-</style>

src/views/old_mini/home/index.vue

@@ -7,7 +7,7 @@
         <!-- 天气 -->
         <weather-info class="weather-info" @weatherExpanded="weatherExpanded"></weather-info>
         <!-- 浮动面板 -->
-        <farm-floating-panel class="farm-floating-panel"></farm-floating-panel>
+        <home-floating-panel class="home-floating-panel"></home-floating-panel>
     </div>
 </template>
 
@@ -17,7 +17,7 @@ import { onMounted, computed, ref } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import weatherInfo from "@/components/weatherInfo.vue";
-import farmFloatingPanel from "./components/farmFloatingPanel.vue";
+import homeFloatingPanel from "./components/homeFloatingPanel.vue";
 const router = useRouter();
 
 const store = useStore();
@@ -60,7 +60,7 @@ const weatherExpanded = (isExpandedValue) => {
         left: 12px;
         width: calc(100% - 24px);
     }
-    .farm-floating-panel{
+    .home-floating-panel{
         position: absolute;
         bottom: 0;
         left: 12px;
@@ -68,14 +68,4 @@ const weatherExpanded = (isExpandedValue) => {
     }
 }
 
-</style>
-
-<style lang="scss">
-.marsGreenGradientPnl {
-    color: #FFFFFF;
-    padding: 4px 12px 4px 10px;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    border-radius: 8px;
-}
-</style>
+</style>