ShangHaiInustrialMuseum/src/App.vue

<template>
  <div id="app">
    <transition name="fade-out">
      <HomeFadeIn
        v-if="isShowFadeInMask"
        class="fade-in-mask"
        @loading-end="onLoadingEnd"
      />
    </transition>
    <router-view />

    <nav
      :style="{
        bottom: isShowNavBar ? '0' : '-112px',
      }"
    >
      <button
        class="tab-item"
        :class="{
          active: $route.name === 'GeneralView'
        }"
        @click="$router.push({name: 'GeneralView'})"
      >
        概述总览
        <img
          class="decorator"
          src="@/assets/images/nav-item-active-decorator.png"
          alt=""
          draggable="false"
        >
      </button>
      <button
        class="tab-item"
        :class="{
          active: $route.name === 'HistoryView'
        }"
        @click="$router.push({name: 'HistoryView'})"
      >
        历史回顾
        <img
          class="decorator"
          src="@/assets/images/nav-item-active-decorator.png"
          alt=""
          draggable="false"
        >
      </button>
      <button
        class="tab-item"
        :class="{
          active: $route.name === 'TreasureView'
        }"
        @click="$router.push({name: 'TreasureView'})"
      >
        国之重器
        <img
          class="decorator"
          src="@/assets/images/nav-item-active-decorator.png"
          alt=""
          draggable="false"
        >
      </button>
      <button
        class="tab-item"
        :class="{
          active: $route.name === 'MetaverseView'
        }"
        @click="$router.push({name: 'MetaverseView'})"
      >
        工业元宇宙
        <img
          class="decorator"
          src="@/assets/images/nav-item-active-decorator.png"
          alt=""
          draggable="false"
        >
      </button>
    </nav>
    <button
      class="show-hide"
      :style="{
        backgroundImage: isShowNavBar ? `url(${require(`@/assets/images/arrow-down.png`)})` : `url(${require(`@/assets/images/arrow-up.png`)})`,
      }"
      @click="isShowNavBar = !isShowNavBar"
    />
  </div>
</template>

<script>
import HomeFadeIn from "@/components/HomeFadeIn.vue"
import {
  computed,
  onMounted,
  reactive,
  ref,
} from 'vue'

export default {
  components: {
    HomeFadeIn,
  },
  setup () {
    const isShowFadeInMask = ref(true)
    function onLoadingEnd() {
      isShowFadeInMask.value = false
    }

    const isShowNavBar = ref(true)
    const activeNavItemIdx = ref(0)
    return {
      isShowFadeInMask,
      onLoadingEnd,

      isShowNavBar,
      activeNavItemIdx,
    }
  },
  mounted() {
    this.$mitt.on('test', e => {
      console.log('test', e)
    })
  }
}
</script>

<style lang="less">
html, body {
  // overscroll-behavior: none;
  // overflow: hidden;
  height: 100%;
}

#app {
  height: 100%;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/main-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

// * {
//   user-select: none;
//   -webkit-touch-callout: none;
// }

// // 360浏览器不支持not()
// input, textarea {
//   user-select: initial;
// }

// 字体
// @font-face {
//   font-family: 'Source Han Serif CN';
//   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
// }
// @font-face {
//   font-family: 'Source Han Serif CN-Bold';
//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
// }
// i {
//   font-style: italic;
// }

// 滚动条
// ::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
// ::-webkit-scrollbar-corner { background: #dddecc; }

// vue组件过渡效果
.fade-out-leave-active {
  transition: opacity 1s;
}
.fade-out-leave-to {
  opacity: 0;
}

// // 不断渐变显隐 animation
// .animation-show-hide {
//   animation: show-hide 1.8s infinite;
// }
// @keyframes show-hide {
//   0% {
//     opacity: 0;
//   }
//   50% {
//     opacity: 1;
//   }
//   100% {
//     opacity: 0;
//   }
// }

// // vue-viewer
// .viewer-container {
//   background-color: rgba(0, 0, 0, 80%) !important;
// }
// 或者
// .viewer-backdrop {
//   background-color: rgba(0, 0, 0, 90%) !important;
// }
</style>
<style scoped lang="less">
#app {
  >.fade-in-mask {
    z-index: 5;
  }
  >nav {
    position: absolute;
    left: 0;
    width: 100%;
    height: 112px;
    border-radius: 5px 5px 0 0;
    border-top: solid 1px #D2BD84;
    box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    >button.tab-item {
      font-size: 30px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      margin-left: 200px;
      opacity: 0.5;
      position: relative;
      >img.decorator {
        display: none;
      }
      &:first-of-type {
        margin-left: initial;
      }
      &.active {
        opacity: initial;
        >img.decorator {
          display: initial;
          position: absolute;
          left: 50%;
          bottom: -15px;
          transform: translateX(-50%);
          width: 150%;
        }
      }
    }
    @media only screen and (max-width: 1400px) {
      >button.tab-item {
        margin-left: 100px;
      }
    }
  }
  >button.show-hide {
    position: absolute;
    right: 82px;
    bottom: 34px;
    width: 36px;
    height: 36px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  @media only screen and (max-width: 1400px) {
    >button.show-hide {
      right: 10px;
    }
  }
}
</style>