qiushou-kiosk/src/components/subHeader.vue

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

<script setup>
defineOptions({
  name: "sub-header",
});
</script>

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