heritage-hub/src/views/layout.vue

<template>
  <div style="min-height:100vh"
       class="100vw">
    <div style="height:80px;background:#000;"
         class="color-white row items-center">
      <div class="col-4 row items-center justify-center"><img src="../assets/images/icon-title.png"
             style="width:40px;height:40px" /><span class="fl-ml-sm">延庆博物馆</span></div>

      <div class="col-6 row justify-around items-center">

        <div class="cursor header-title">首页</div>
        <div class="cursor header-title">导航</div>
        <div class="cursor header-title">展览</div>
        <div class="cursor header-title">典藏</div>
        <div class="cursor header-title">资讯</div>
        <div class="cursor header-title">文创</div>
        <div class="cursor header-title">数字文脉</div>
        <div class="cursor header-title">关于</div>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>

    <div style="height:187px;background:#000;"
         class="row justify-center fl-mt-lg color-white">
      <div class="col-6 row justify-around fl-mt-lg">
        <div class="cursor">首页</div>
        <div class="cursor">导航</div>
        <div class="cursor">展览</div>
        <div class="cursor">典藏</div>
        <div class="cursor">资讯</div>
        <div class="cursor">文创</div>
        <div class="cursor">数字文脉</div>
        <div class="cursor">关于</div>
      </div>
    </div>
  </div>
</template>
<script setup>

</script>

<style scoped>
.header-title {
  padding: 2px 18px;
  border-radius: 25px;
}
.header-title:hover {
  background: #3d8873;
}
</style>