crm-app-vue3/pages/orderDetailNew/index.vue

<template>
    <view>
        <!-- 正确使用 u-navbar 的具名插槽 -->
        <u-navbar :autoBack="true" :placeholder="true" v-hideNav>
            <template v-slot:center>
                <view class="slot-wrap">
                    <text @click="handleBrandClick" class="brand">Hermes</text>
                    <text class="divider">|</text>
                    <text @click="handleModelClick" class="model">Birkin 30</text>
                    <text class="divider">|</text>
                    <text @click="handlePriceClick" class="price">¥125,000</text>
                </view>
            </template>
            <template v-slot:right>
                <view class="slot-right">
                    <image src="/static/icons/plus.png" mode="scaleToFill" />
                    <text>加一单</text>
                </view>
            </template>
        </u-navbar>

        <orderDetailNewView />

    </view>
</template>

<script>
import orderDetailNewView from './components/orderDetailNewView.vue'
export default {
    name: 'CustomNavbar',
    components: {
        orderDetailNewView
    },
    methods: {
        handleBrandClick() {
            console.log('点击了品牌')
        },
        handleModelClick() {
            console.log('点击了型号')
        },
        handlePriceClick() {
            console.log('点击了价格')
        }
    }
}
</script>

<style scoped>
.slot-wrap {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 40rpx;
    padding: 10rpx 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.brand {
    font-weight: bold;
    color: #333;
    font-size: 28rpx;
}

.divider {
    margin: 0 15rpx;
    color: #ddd;
    font-size: 28rpx;
}

.model {
    color: #666;
    font-size: 26rpx;
}

.price {
    color: blueviolet;
    font-weight: bold;
    font-size: 28rpx;
}

.slot-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: blueviolet;

    image {
        width: 30rpx;
        height: 30rpx;
    }
}
</style>