ShangHaiInustrialMuseum/src/App.vue

<template>
  <div
    class="app-view"
    :class="{
      higher: !isShowNavBar,
    }"
  >
    <div
      v-show="$route.meta.isShowUnityModel"
      id="unity-container"
    >
      <canvas
        id="unity-canvas"
        width="960"
        height="600"
        tabindex="-1"
      />
    </div>

    <router-view />

    <nav
      v-show="!$route.meta.hideNavBar"
      :style="{
        bottom: isShowNavBar ? '0' : `-${navBarHeight}`,
      }"
    >
      <button
        class="tab-item"
        :class="{
          active: $route.meta.belongNavGroup === 0
        }"
        @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.meta.belongNavGroup === 1
        }"
        @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.meta.belongNavGroup === 2
        }"
        @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.meta.belongNavGroup === 3
        }"
        @click="$router.push({name: 'MetaverseView'})"
      >
        工业元宇宙
        <img
          class="decorator"
          src="@/assets/images/nav-item-active-decorator.png"
          alt=""
          draggable="false"
        >
      </button>
    </nav>
    <button
      v-show="!$route.meta.hideNavBar"
      class="show-hide"
      :style="{
        backgroundImage: isShowNavBar ? `url(${require(`@/assets/images/arrow-down.png`)})` : `url(${require(`@/assets/images/arrow-up.png`)})`,
      }"
      @click="isShowNavBar = !isShowNavBar"
    />

    <Teleport to="body">
      <transition name="fade-out">
        <HomeFadeIn
          v-if="isShowFadeInMask"
          class="fade-in-mask"
          :progress="progress"
        />
      </transition>
    </Teleport>>

    <Teleport to="body">
      <div class="screen-rotate-tip">
        <div class="inner-wrapper">
          <img
            class=""
            src="@/assets/images/tip-screen-rotate.png"
            alt=""
            draggable="false"
          >
          <span>请横屏浏览</span>
        </div>
      </div>
    </Teleport>
  </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)
    const progress = ref(0)
    onMounted(() => {
      /**
     * 加载unity
     */
      window.addEventListener("load", function () {
        if ("serviceWorker" in navigator) {
          navigator.serviceWorker.register("ServiceWorker.js")
        }
      })

      var canvas = document.querySelector("#unity-canvas")

      var buildUrl = "unity/Build"
      var loaderUrl = buildUrl + "/SHIndustryMuseum_2.6.loader.js"
      var config = {
        dataUrl: buildUrl + "/SHIndustryMuseum_2.6.data.unityweb",
        frameworkUrl: buildUrl + "/SHIndustryMuseum_2.6.framework.js.unityweb",
        codeUrl: buildUrl + "/SHIndustryMuseum_2.6.wasm.unityweb",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "SHIndustryMuseum",
        productVersion: "0.1",
      }

      // By default Unity keeps WebGL canvas render target size matched with
      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
      // Set this to false if you want to decouple this synchronization from
      // happening inside the engine, and you would instead like to size up
      // the canvas DOM size and WebGL render target sizes yourself.
      // config.matchWebGLToCanvasSize = false;
      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      // Mobile device style: fill the whole browser client area with the game canvas:
        var meta = document.createElement('meta')
        meta.name = 'viewport'
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
        document.getElementsByTagName('head')[0].appendChild(meta)
      }

      var script = document.createElement("script")
      script.src = loaderUrl
      script.onload = () => {
        createUnityInstance(canvas, config, (paramProgress) => {
          progress.value = Math.round(paramProgress * 100)
          if (paramProgress > 0.95) {
            setTimeout(() => {
              isShowFadeInMask.value = false
            }, 1000)
          }
        }).then((unityInstance) => {
          window.gUnityInst = unityInstance
          utils.loadUnitySceneGeneral()
        }).catch((message) => {
          alert(message)
        })
      }
      window.onClickEnterprise = function (id) {
        if (window.handleClickEnterprise) {
          window.handleClickEnterprise(id)
        }
      }
      window.onClickPlanet = function (id) {
        if (window.handleClickPlanet) {
          window.handleClickPlanet(id)
        }
      }
      window.onMovedPlanet = function (id) {
        if (window.handleMovedPlanet) {
          window.handleMovedPlanet(id)
        }
      }
      document.body.appendChild(script)
      /**
       * end of unity
       */
    })

    const isShowNavBar = ref(true)
    const activeNavItemIdx = ref(0)
    const navBarHeight = '90px'
    return {
      isShowFadeInMask,
      progress,

      isShowNavBar,
      activeNavItemIdx,
      navBarHeight,
    }
  },
}
</script>

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

#app {
  height: 100%;
  width: 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 Sans CN-Light';
  src: url('@/assets/style/SOURCEHANSANSCN-LIGHT.OTF');
}
@font-face {
  font-family: 'Source Han Sans CN-Regular';
  src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
}
@font-face {
  font-family: 'Source Han Sans CN';
  src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
}
@font-face {
  font-family: 'Source Han Sans CN-Bold';
  src: url('@/assets/style/SOURCEHANSANSCN-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;
// }

.screen-rotate-tip {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  @media (max-aspect-ratio: 1/1) {
    display: initial;
  }
  >.inner-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 126px;
    height: 126px;
    >img {
      width: 100%;
      height: 100%;
    }
    >span {
      position: absolute;
      left: 50%;
      bottom: -8px;
      transform: translate(-50%, 100%);
      font-size: 16px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #FFFFFF;
      white-space: pre;
    }
  }
}
</style>
<style scoped lang="less">
.app-view {
  width: 100%;
  height: calc(100% - v-bind('navBarHeight'));
  position: relative;
  &.higher {
    height: 100%;
  }
  >.fade-in-mask {
    z-index: 2005;
  }
  >#unity-container {
    position: absolute;
    width: 100%;
    height: 100%;
    >#unity-canvas {
      height: 100%;
      width: 100%;
      background: #231F20;
    }
  }

  >nav {
    position: fixed;
    left: 0;
    width: 100%;
    height: rgba(210, 189, 132, 0.7);
    height: v-bind('navBarHeight');
    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;
    // backdrop-filter: blur(10px);
    background-image: url(@/assets/images/bg-bottom-bar.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    // background-color: #0c0d12;
    >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;
      user-select: none;
      >img.decorator {
        display: none;
      }
      &:first-of-type {
        margin-left: initial;
      }
      &.active {
        opacity: initial;
        font-weight: bold;
        >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: fixed;
    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>