menduner-uniapp/components/Navbar/index.vue

<template>
  <view class="navbar-box">
    <image src="https://minio.citupro.com/dev/menduner/poster.png" class="navbar-box-logo"></image>
    <view class="navbar-box-title">{{ title }}</view>
  </view>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: '门墩儿'
  }
})
</script>

<style scoped lang="scss">
.navbar-box {
  height: 80px;
  width: 100%;
  position: relative;
  background: linear-gradient(90deg, #66BB6A 0, #64FFDA 100%);
  &-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 42px;
    margin-left: 10px;
  }
  &-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-30%, 0);
    color: #fff;
  }
}
</style>