QiuShou-kiosk/src/components/subHeader.vue

<template>
  <div class="header">
    <div class="logo">
      <img :src="logo" alt="logo" />
    </div>
  </div>
</template>

<script setup>
import logo from '../assets/logo.png'
defineOptions({
  name: "sub-header",
});

defineProps({
  logo: {
    type: String,
    default: () => logo,
  },
});
</script>

<style lang="scss" scoped>
.header {
  height: var(--main-sub-header-height);
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  background-image: var(--main-sub-header-background);
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  flex: 0 0 var(--main-sub-header-height);

  .logo {
    height: var(--main-sub-header-logo-height);
    margin-left: var(--main-sub-header-margin-left);
    img {
      height: 100%;
      width: auto;
    }
  }
}
</style>