2025-06-27模拟饿了么吸顶

parent

<template>
    <div class="meiTuan">
        <div class="head" ref="topTarget">
            购药立享38折
        </div>
        <div class="upgrade" ref="target" :class="{ 'fixed': isFixed }">滚动到顶部停留</div>
        <MenuPage />
    </div>
</template>
<script setup>
import MenuPage from './menuPage.vue';
import { ref, onMounted, onUnmounted, useTemplateRef } from 'vue';
const isFixed = ref(false);
const targetElement = useTemplateRef('topTarget');
onMounted(() => {
    function handleScroll() {
        if (targetElement.value) {
            const rect = targetElement.value.getBoundingClientRect();
            if (rect.top < -300) {
                // useTemplateRef('target').value.addClass('fixed');
                isFixed.value = true
            } else {
                isFixed.value = false
            }
            // const distanceFromTop = rect.top + window.scrollY;
            console.log('距离顶部距离:', rect.top);
        }
    }
    console.log(targetElement.value)
    window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
    // window.removeEventListener('scroll', handleScroll);
});
</script>
<style>
.meiTuan {
    width: 500px;
    height: 100%;
    overflow: hidden;
    background-color: aliceblue;
    border-radius: 4px;
}

.head {
    height: 300px;
    background-color: aqua;
}

.upgrade {
    height: 100px;
    background-color: chocolate;
}

.fixed {
    position: fixed;
    top: 0;
    width: 500px;
}
</style>

child

<template>
    <div class="menu">
        <div class="left">
            <div v-for="item in leftMenuData" :key="item.id" class="leftitem">{{ item.name }}</div>
        </div>
        <div class="right">
            <div v-for="item in rightMenuData" :key="item.id" class="rightItem">
                <div class="img">
                    <div class="imgCon"></div>
                </div>
                <div class="con">
                    <div class="title">{{ item.title }}</div>
                    <div class="details">
                        <span class="detailsCon">{{ item.con }} </span>
                        <span>></span>
                    </div>
                    <div class="price">
                        <div>
                            <span>特价：￥</span>
                            <span>{{ item.currentPrice }}</span>
                        </div>
                        <div>
                            <span>市场价：￥</span>
                            <span>{{ item.oldPrice }}</span>
                        </div>
                    </div>
                    <div class="ReimbursementPrice">
                        <span>报销价</span>
                        <span>￥{{ item.ReimbursementPrice }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
// import { ref } from 'vue'
const leftMenuData = [
    { id: 1, name: '0.1元专区' },
    { id: 2, name: '儿科用药' },
    { id: 3, name: '补益安捭' },
    { id: 4, name: '肠胃消化' },
    { id: 1, name: '元专区' },
    { id: 2, name: '儿科用药' },
    { id: 3, name: '补益安捭' },
    { id: 4, name: '肠胃消化' },    
    { id: 2, name: '儿科用药' },
    { id: 3, name: '补益安捭' },
    { id: 4, name: '肠胃消化' }
];
const rightMenuData = [
    {
        id: 1,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 2,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 3,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 1,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 2,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 3,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 2,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 3,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 2,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 3,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 2,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    },
    {
        id: 3,
        title: '[999]999服冒灵科颖拉10g*8袋/盒{2025年11月到期)',
        con: '劳品陆邮药品功说明一行超过劳品陆邮药品功说明一行超过',
        currentPrice: '0.1',
        oldPrice: '12.00',
        ReimbursementPrice: '0.04'
    }
]
</script>
<style>
.menu,
.rightItem {
    display: flex;
}

.left {
    width: 30%;
    background-color: pink;
}

.leftitem {
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}

.right {
    background-color: green;
}

.img {
    background: red;
    left: 10px;
    top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imgCon {
    width: 80px;
    height: 80px;
    background-color: aqua;
    margin: 0 10px;
}

.con {
    padding: 10px;
}

.title {
    text-align: start;
}

.details {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.detailsCon {
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    margin: 4px 0px;
}

.price {
    display: flex;
    justify-content: flex-start;
}
.ReimbursementPrice{
    text-align: start;
}
</style>

效果图

image.png

image.png