material-shop-user/pages/new-tabbar/components/Nav.vue

<template>
    <div class="nav">
        <header>
            <div class="title">
                <slot name="title"></slot>
            </div>
            <div class="search">
                <div class="search-box">
                    <div class="text">
                        <span>龙江镇</span>
                        <p><tui-icon color="#000" name="turningdown"></tui-icon></p>
                    </div>
                    <tui-input placeholder="团蜂科技" :size="28" padding="0rpx 0rpx" :borderBottom="false"></tui-input>
                    <div class="search-icon">
                        <tui-icon name="search" color="#000" :size="24"></tui-icon>
                    </div>
                </div>
                <div class="classification" @click="goClass">
                    <img src="../../../static/new-images/home/classification.png" alt="">
                    <span>分类</span>
                </div>
            </div>
        </header>
    </div>
</template>

<script>
export default {
    methods:{
        goClass(){
            uni.navigateTo({
                url:"/pages/classification/index"
            })
        }
    }
}
</script>

<style lang="scss" scoped>
header {
    padding: 30rpx 30rpx 25rpx;
    background-color: #fff;

    .title {
        padding: 15rpx 0;
        display: flex;
        align-items: flex-end;

        p {
            font-size: 42rpx;
            font-weight: 700;
        }

        span {
            margin-left: 10rpx;
            font-size: 28rpx;
            color: #000;
            font-weight: 500;
            margin-bottom: 5rpx;
        }
    }

    .search {
        height: 72rpx;
        margin-top: 40rpx;
        box-sizing: border-box;
        position: relative;
        display: flex;
        gap: 30rpx;

        .search-box {
            border: 2rpx solid #000;
            border-radius: 50rpx;
            padding-left: 30rpx;
            display: flex;
            align-items: center;
            position: relative;
            width: 580rpx;

            .text {
                display: flex;
                gap: 10rpx;
                align-items: center;
                margin-right: 5rpx;
                span{
                    white-space: nowrap;
                }
                p {
                    position: relative;
                    &::after {
                        content: "";
                        width: 1px;
                        height: 60%;
                        background-color: #F5F5F5;
                        position: absolute;
                        right: 5rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }

            .search-icon {
                position: absolute;
                right: 30rpx;
                top: 10rpx;
            }
        }

        .classification {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 24rpx;
            margin-top: 8rpx;
            gap: 5rpx;
            span{
                white-space: nowrap;
            }
            img {
                width: 36rpx;
                height: 36rpx;
                display: block;
            }
        }
    }
}
</style>