nanjin-military-museum/packages/mobile/src/components/TopNav.vue

<template>
  <div class="topnav">
    <i class="topnav-logo" />
    <h3 class="limit-line">武警北京市总执勤第十三支队数字史馆</h3>
    <i class="topnav-menu" @click="menuVisible = !menuVisible" />
  </div>

  <Sidebar v-model:show="menuVisible" />
</template>

<script setup>
import { ref } from "vue";
import Sidebar from "./Sidebar.vue";

const menuVisible = ref(false);
</script>

<style lang="scss" scoped>
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 80px 0 130px;
  height: 100px;
  line-height: 100px;
  color: white;
  font-size: 27px;
  background: #c50b10;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15);
  z-index: var(--z-hot-popper);

  &-logo {
    position: absolute;
    top: -8px;
    left: 15px;
    display: block;
    width: 104px;
    height: 123px;
    background: url("@/assets/images/logo-bg-min.png") no-repeat center /
      contain;

    &::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 50%;
      width: 90px;
      height: 88px;
      background: url("@/assets/images/logo-min.png") no-repeat center / contain;
      transform: translateX(-50%);
    }
  }
  &-menu {
    position: absolute;
    top: 50%;
    right: 27px;
    width: 36px;
    height: 36px;
    background: url("@/assets/images/menu-min.png") no-repeat center / contain;
    transform: translateY(-50%);
  }
}
</style>