<template>
  <div class="navigation-bar">
    <div :text="title">{{ title }}</div>
  </div>
</template>

<script setup name="NavigationBar">
  const props = defineProps({
    title: {
      type: String,
      default: "政务服务实景三维地图",
    },
  });

</script>

<style lang="scss" scoped>
.navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 1000;
  background: url("@/assets/images/navigation.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  & > div {
    padding-top: 15px;
    font-size: 36px;
    color: #ffffff;
    letter-spacing: 3px;
    text-shadow: #333 2px 2px 2px;
    font-family: "xiniu";
  }
  & > div::before {
    content: attr(text);
    position: absolute;
    z-index: 10;
    color: #ffffff;
    background: linear-gradient(0deg, #9cf7ff 20%, #eaeaeb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
}
</style>
