<template> <view class="navbar"> <view class="content" :style="{ background: isScrolling ? '#fff' : bagColor }"> <view :style="{ height: `${getHeight.barTop}px` }"></view> <view class="acea-row bar" :style="{ height: `${getHeight.barHeight}px`,width: `${750-2*getHeight.barWidth}rpx` }"> <view class="back-icon acea-row row-center-wrapper"> <view v-show="showBack" @click="back" class="iconfont icon-xiangzuo back-icon" :style="{ lineHeight: `${getHeight.barHeight}rpx`}" ></view> </view> <view class="title">{{ titleText }}</view> <view class="h-80 px-5 flex-y-center"> <view class="w-full h-58 flex-y-center rd-30rpx bg--w111-fff px-32"> <text class="iconfont icon-sousuo8 fs-28"></text> <input class="fs-24 pl-18" placeholder="搜索商品名称或订单号"> </view> <view class="search_right_icon"> </view> </view> <!-- <view class="right-icon acea-row row-center-wrapper"> <view v-show="showRight" class="right-icon"></view> </view> --> </view> </view> <view class="placeholder"> <view :style="{ height: `${getHeight.barTop}px` }"></view> <view :style="{ height: `${getHeight.barHeight}px` }"></view> </view> </view> </template> <script> export default { name: 'headerNav', props: { // 滚动至下部 isScrolling: { type: Boolean, default: false }, // 是否显示返回icon showBack: { type: Boolean, default: false }, // Title titleText: { type: String, default: '' }, // 背景色 bagColor: { type: String, default: 'transparent' } }, data() { return { getHeight: this.$util.getWXStatusHeight() }; }, methods: { back() { uni.navigateBack(); } } }; </script> <style lang="scss"> .navbar { position: relative; color: #333; .content { position: fixed; top: 0; right: 0; left: 0; z-index: 998; background-color: var(--view-theme); font-weight: 500; font-size: 34rpx; color: #ffffff; .back-icon, .right-icon { width: 40rpx; height: 40rpx; } .bar { align-items: center; } .title { margin-left: 10rpx; } } } .search_right_icon{ width: 80rpx; height: 60rpx; border-radius: 30rpx; background: darkgray; margin-left: 20rpx; } .icon-sousuo8{ color: #333; } .h-80{ width: 75%; margin-left: 10rpx; } .icon-xiangzuo,.title{ color: #999999; font-size: 30rpx; } </style>