qiushou-kiosk/src/components/heroSubTitle.vue

<template>
  <div class="pure-nav">
    <span class="meta-title">
      <img :src="titleSrc" />
    </span>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { computedAsync } from "@vueuse/core";

defineOptions({
  name: "hero-sub-title",
});
const props = defineProps({
  type: {
    type: Number,
    default: () => 1,
  },
});

const titleSrc = computed(
  () => new URL(`../assets/subtitle_${props.type || 1}.png`, import.meta.url)
);
</script>

<style lang="scss" scoped>
.pure-nav {
  height: var(--main-sub-nav-height);
  width: calc(100% - var(--main-sub-menu-width));
  background-image: var(--main-sub-nav-background);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  padding-right: var(--main-sub-menu-width);
  display: block;
  flex: 0 0 var(--main-sub-nav-height);
  .meta-title {
    font-size: 1.375rem;
    text-align: center;
    width: var(--main-sub-nav-title-width);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    img {
      width: auto;
      height: calc(var(--main-sub-nav-height) - 0.95rem);
    }
  }
}
</style>