horzi_rai_wxa/components/search-bar/searchBar.vue

<template>
 
    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
      <slot name="content-left"> </slot>
      <view class="search-box" @click="goSearch" :style="{ width: `${width}%` }">
        <icon type="search" size="15" class="search_ico" />
        <text class="sea_ipt">{{ searchTitle || "" }}</text>
      </view>
       <slot name="content-right"> </slot>
    </view>
</template>

<script>
export default {
  props: {
    searchTitle: {
      type: String,
      requer: true,
      default: "",
    },
    width: {
      type: Number,
      requer: true,
      default: "",
    },
  },
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
    };
  },
  mounted() {
    this.initNavBar();
  },
  methods: {
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    goSearch() {
      this.$emit("goSearch");
    },
  },
};
</script>
<style scoped lang="scss">
.nav-bar-wrap {
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  .search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 55%;
    height: 63rpx;
    font-size: 30rpx;
    color: #8d8d8d;
    background-color: #f3f3f3;
    padding-left: 33rpx;
    border-radius: 70rpx;
    .sea_ipt {
      padding-left: 15rpx;
    }
  }
}
</style>