feiniao-farm-h5/src/views/old_mini/home/components/homeFloatingPanel.vue

<template>
    <floating-panel class="floating-panel" :class="{ 'background-panel': isBackground }" v-model:height="height" :anchors="anchors" :content-draggable="false" @height-change="handleHeightChange">
        <template #header>
            <div class="floating-panel-header">
                <div class="tabs">
                    <div
                        :class="['tab-item', activeTab === index ? 'active' : '']"
                        v-for="(tab, index) in tabs"
                        :key="tab"
                        @click="handleTabClick(index)"
                    >
                        {{ tab }}
                    </div>
                </div>
            </div>
        </template>
        <div class="floating-panel-content">
            <div class="select-group">
                <div class="select-item">
                    <div class="select-item-title">123</div>
                </div>
            </div>
            <div class="tabs-content-group">
                <div :class="['tabs-content-item',activeTabsContent === index ? 'active' : '']" v-for="(tab,index) in tabsContent" :key="tab" @click="handleTabsContentClick(index)">
                    {{ tab }}
                </div>
            </div>
            <div class="card-content-group">
                <div class="card-content-item">
                    <div class="card-content-item-title">果园总览</div>
                    <div class="card-content-item-content">
                        <div>果园面积共XX亩，共有XX棵生产树。</div>
                        <div>本次飞巡拍摄了XX张照片，包括了XX棵树，目前为施用根部有机肥阶段，根据树体冠幅大小，果园预计施用有机肥XXkg。</div>
                        <div>目前XX%的树体暂未萌动新梢，需要进行剪枝农事，提高树体光合效率与通风效率。</div>
                    </div>
                </div>
                <div class="card-content-item">
                    <div class="card-content-item-title">整体园相</div>
                    <div class="card-content-item-content">
                        <div class="card-name">透光率</div>
                        <div class="card-value">透光率体现树体自身郁闭程度，当前XX%的树体透光性较差，可能造成整体减产XX%，需立即执行剪枝农事；XX%的树体透光正常，建议继续保持现有管理措施并及时巡园。</div>
                    </div>
                </div>
            </div>
        </div>
    </floating-panel>
</template>

<script setup>
import { FloatingPanel } from "vant";
import { useStore } from "vuex";
import { computed, ref } from "vue";

const store = useStore();
// const tabBarHeight = computed(() => store.state.home.tabBarHeight);
const tabBarHeight = ref(localStorage.getItem("tabBarHeight") * 1 || 50);

const defalutHeight = ref(tabBarHeight.value + 32);
const anchors = ref([defalutHeight.value, 310 + tabBarHeight.value, Math.round(1 * window.innerHeight)]);
const height = ref(anchors.value[2]);

const activeTab = ref(0);
const tabs = ref(["农事任务", "农场档案"]);

const handleTabClick = (index) => {
    activeTab.value = index;
};

const tabsContent = ref(["果园总览", "整体园相", "营养管理", "病虫管理"]);

const activeTabsContent = ref(0);
const handleTabsContentClick = (index) => {
    activeTabsContent.value = index;
};

const emit = defineEmits(['heightChange'])

const isBackground = ref(false)
const handleHeightChange = (data) => {
    isBackground.value = false
    if(data.height > anchors.value[1]){
        isBackground.value = true
    }
    emit('heightChange',data.height)
};
</script>

<style lang="scss" scoped>
.van-floating-panel{
    border-radius: 0;
}
.floating-panel {
    width: 100%;
    background: linear-gradient(180deg, transparent 0%, #F5F7FB 14%);
    ::v-deep {
        .van-floating-panel__content {
            background: transparent;
        }
    }
    .floating-panel-header {
        width: calc(100% - 24px);
        border-radius: 14px 14px 0 0;
        margin: 0 auto;
        background: #fff;
        .tabs {
            display: flex;
            .tab-item {
                flex: 1;
                text-align: center;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.5);
                font-weight: 500;
                padding: 10px 0;
                &.active {
                    color: #2199f8;
                    border-radius: 14px 14px 0 0;
                    background: linear-gradient(180deg, #cee5fb 0%, #fff 80%);
                }
            }
        }
    }
    .floating-panel-content {
        width: calc(100% - 24px);
        height: 100%;
        margin: 0 auto;
        .select-group {
            padding-top: 5px;
            background: #fff;
            .select-item {
                .select-item-title {
                    font-size: 16px;
                }
            }
        }
        .tabs-content-group{
            display: flex;
            justify-content: space-evenly;
            padding: 5px 0;
            border-radius: 0 0 14px 14px;
            background: #fff;
            .tabs-content-item{
                font-size: 14px;
                color: rgba(0, 0, 0, 0.5);
                font-weight: 500;
                padding: 4px 12px;
                border-radius: 14px;
                text-align: center;
                &.active{
                    color: #2199f8;
                    background: rgba(33, 153, 248, 0.2);
                }
            }
        }
        .card-content-group{
            padding: 12px 0;
            .card-content-item{
                margin-top: 10px;
                border-radius: 14px;
                padding: 12px;
                background: #fff;
                color: #171717;

                .card-content-item-title{
                    font-size: 16px;
                    font-weight: 500;
                    text-align: center;
                    position: relative;
                    &::before{
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: -1px;
                        width: 66px;
                        height: 8px;
                        background: rgba(33, 153, 248, 0.3);
                        border-radius: 4px;
                    }
                }
                .card-content-item-content{
                    margin-top: 12px;
                    border-radius: 8px;
                    background: rgba(238, 238, 238, 0.3);
                    padding: 10px;
                    line-height: 23px;
                    div + div{
                        margin-top: 5px;
                    }
                }
            }
        }   
    }
    &.background-panel{
        background: #F5F7FB;
        .floating-panel-header {
            margin-top: 12px;
        }
    }
}
</style>