ShangHaiInustrialMuseum/src/views/Metaverse.vue

<template>
  <div class="metaverse-root">
    <article v-if="isShowDesc">
      <button
        class="close"
        @click="onClickCloseDesc"
      />
      <h2>{{ desc.name }}</h2>
      <img
        class="splitter"
        src="@/assets/images/splitter.png"
        alt=""
        draggable="false"
      >
      <!-- <img
        class="banner"
        src="@/assets/images/for-dev.jpg"
        alt=""
        draggable="false"
      > -->
      <div
        class="txt"
        v-html="desc.detail || ''"
      />
    </article>

    <!-- element-ui的loading效果从调用到出现有延时，这期间要遮盖住组件 -->
    <div
      v-show="isShowLoadingMask"
      class="loading-mask"
    />
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  ref,
  onMounted,
} from 'vue'

export default {
  name: 'MetaverseView',
  beforeRouteLeave() {
    gUnityInst.SendMessage('MainPanel', 'ResetCamera')
  },
  setup () {
    const rawData = reactive({ value: null })
    onMounted(async () => {
      rawData.value = await api.getMetaverseList()
    })

    const isShowDesc = ref(false)
    const desc = reactive({})
    function onClickCloseDesc() {
      isShowDesc.value = false
      gUnityInst.SendMessage('MainPanel', 'ResetCamera')
    }

    function onClickStar(idx) {
      desc.name = rawData.value[idx].name
      desc.detail = rawData.value[idx].description
      isShowDesc.value = true
    }
    window.handleClickPlanet = function(id) {
      console.log('click planet', id)
      onClickStar(id - 1)
    }
    window.handleMovedPlanet = function(id) {
      console.log('moved planet', id)
    }

    const isShowLoadingMask = ref(true)
    onMounted(() => {
      setTimeout(() => {
        isShowLoadingMask.value = false
      }, 200)
    })

    return {
      rawData,

      isShowDesc,
      desc,
      onClickCloseDesc,

      onClickStar,

      isShowLoadingMask,
    }
  }
}
</script>

<style lang="less" scoped>
.metaverse-root {
  height: 100%;
  position: relative;
  pointer-events: none;
  >article {
    pointer-events: initial;
    position: absolute;
    top: calc(100% / 2);
    transform: translateY(-50%);
    right: 102px;
    width: 653px;
    height: calc(100% - 74px - 50px);
    max-height: 740px;
    backdrop-filter: blur(10px);
    background-image: url(@/assets/images/general-article-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    padding: 32px 50px 50px 50px;
    display: flex;
    flex-direction: column;
    @media only screen and (max-width: 1700px) {
      right: 0;
    }
    >button.close {
      position: absolute;
      top: 30px;
      right: 50px;
      width: 32px;
      height: 32px;
      background-image: url(@/assets/images/icon-close.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    >h2 {
      flex: 0 0 auto;
      font-size: 24px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #FFFFFF;
      margin-bottom: 21px;
    }
    >img.splitter {
      flex: 0 0 auto;
      width: 100%;
      margin-bottom: 37px;
    }
    >img.banner {
      flex: 0 0 auto;
      width: 100%;
      height: 34.8%;
      object-fit: contain;
      margin-bottom: 20px;
    }
    >.txt {
      flex: 1 0 1px;
      font-size: 20px;
      font-family: Source Han Sans CN-Light, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.7;
      overflow: auto;
      padding-right: 10px;
      margin-right: -10px;
      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
      &::-webkit-scrollbar-thumb {
        background: rgba(220, 231, 240, 0.2);
        border-radius: 2px;
      }
    }
  }
  .loading-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
  }
}

.mobile {
  .metaverse-root {
    height: 100%;
    position: relative;
    pointer-events: none;
    >article {
      pointer-events: initial;
      position: absolute;
      top: calc(100% / 2);
      transform: translateY(-50%);
      right: calc(102 / 1080 * 100vh);
      width: calc(653 / 1080 * 100vh);
      height: calc(100% - 74px - 50px);
      max-height: calc(740 / 1080 * 100vh);
      backdrop-filter: blur(10px);
      background-image: url(@/assets/images/general-article-bg.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: left top;
      padding: calc(32 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh) calc(50 / 1080 * 100vh);
      display: flex;
      flex-direction: column;
      @media only screen and (max-width: 1700px) {
        right: 0;
      }
      >button.close {
        position: absolute;
        top: calc(30 / 1080 * 100vh);
        right: calc(50 / 1080 * 100vh);
        width: calc(32 / 1080 * 100vh);
        height: calc(32 / 1080 * 100vh);
        background-image: url(@/assets/images/icon-close.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
      }
      >h2 {
        flex: 0 0 auto;
        font-size: calc(24 / 1080 * 100vh);
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: calc(21 / 1080 * 100vh);
      }
      >img.splitter {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: calc(37 / 1080 * 100vh);
      }
      >img.banner {
        flex: 0 0 auto;
        width: 100%;
        height: 34.8%;
        object-fit: contain;
        margin-bottom: calc(20 / 1080 * 100vh);
      }
      >.txt {
        flex: 1 0 1px;
        font-size: calc(20 / 1080 * 100vh);
        font-family: Source Han Sans CN-Light, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.7;
        overflow: auto;
        padding-right: calc(10 / 1080 * 100vh);
        margin-right: calc(-10 / 1080 * 100vh);
        &::-webkit-scrollbar { background: transparent; width: calc(4 / 1080 * 100vh); } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
        &::-webkit-scrollbar-thumb {
          background: rgba(220, 231, 240, 0.2);
          border-radius: 2px;
        }
      }
    }
    .loading-mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: black;
    }
  }
}
</style>