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="G4mainBox">
        <!-- 企业 -->
        <div
          v-if="G4info.company.length"
          class="G4box"
        >
          <div class="G4Tit">
            <div class="G4TitOne">
              企业
            </div>

            <div
              class="G4rightMore"
              @click="$router.push('/general')"
            >
              更多 +
            </div>
          </div>
          <!-- 单个企业 -->
          <div
            v-for="item in G4info.company"
            :key="item.id"
            class="G41row"
            @click="$router.push(`/general?id=${item.id}`)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 人物 -->
        <div
          v-if="G4info.person.length"
          class="G4box"
        >
          <div class="G4Tit">
            <div class="G4TitOne">
              人物
            </div>

            <div
              class="G4rightMore"
              @click="$router.push('/history')"
            >
              更多 +
            </div>
          </div>
          <div
            v-for="item in G4info.person"
            :key="item.id"
            class="G42row"
          >
            <img
              v-if="item.thumb"
              :src="`${prefix}/${item.thumb}`"
              alt=""
            >
            <img
              v-else
              :src="require('@/assets/images/imgErr.png')"
              alt=""
            >
            <div class="G1RenBoxTxt">
              <h3>{{ item.name }}</h3>
              <p>&emsp;&emsp;{{ item.description }}</p>
            </div>
          </div>
        </div>
        <!-- 重器 -->
        <div
          v-if="G4info.goods.length"
          class="G4box"
        >
          <div class="G4Tit">
            <div class="G4TitOne">
              重器
            </div>

            <div
              class="G4rightMore"
              @click="$router.push('/treasure')"
            >
              更多 +
            </div>
          </div>
          <div class="G43rowBox">
            <div
              v-for="item in G4info.goods"
              :key="item.id"
              class="G43row"
              :title="item.name"
              @click="$router.push(`/Treasure-detail?id=${item.id}`)"
            >
              <img
                v-if="item.thumb"
                :src="`${prefix}/${item.thumb}`"
                alt=""
              >
              <img
                v-else
                :src="require('@/assets/images/imgErr.png')"
                alt=""
              >

              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
        <!-- 简介 -->
        <div class="G4box">
          <div class="G4Tit">
            <div class="G4TitOne">
              简介
            </div>
          </div>
          <div
            class="G4Txt"
            v-html="desc.detail || ''"
          />
        </div>
      </div>
    </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('Page4', 'ResetCamera')
  },
  setup() {

    const prefix = ref(process.env.VUE_APP_API_ORIGIN)

    const rawData = reactive({ value: null })
    onMounted(async () => {
      rawData.value = await api.getMetaverseList()
      window.G4AllList = await api.getMetaverseList()
    })

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

    function onClickStar(idx) {
      desc.name = rawData.value[idx].name
      desc.detail = rawData.value[idx].description
      isShowDesc.value = true
    }

    function focusStar(idx) {
      desc.name = rawData.value[idx].name
      desc.detail = rawData.value[idx].description
      isShowDesc.value = true
      window.gUnityInst.SendMessage('Page4', 'OnClickPlaneId', idx + 1)
    }
    onMounted(async () => {
      const url = window.location.href
      if (url.includes('id=')) {
        const id = url.split('id=')[1]
        // console.log('ppppppppppppppppp', id)
        setTimeout(() => {
          focusStar(Number(id) - 1)
        }, 400)
      }
    })

    // 详情数据
    const G4info = ref({
      company: [],
      person: [],
      goods: []
    })

    // 获取详情接口
    const getInfoFu = async (id) => {
      const res = await api.getG4InfoApi(id)
      G4info.value = {
        company: res.company || [],
        person: res.person || [],
        goods: res.goods || []

      }

    }

    window.handleClickPlanet = function (id) {
      G4info.value = {
        company: [],
        person: [],
        goods: []
      }
      // 点击详情
      // 发送接口拿到详情数据
      getInfoFu(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 {
      prefix,
      rawData,

      isShowDesc,
      desc,
      onClickCloseDesc,

      onClickStar,

      isShowLoadingMask,
      G4info
    }
  }
}
</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;
    }

    // 邵根
    .G4mainBox {
      padding-right: 8px;
      overflow-y: auto;
      height: 100%;
      font-size: 20px;
      font-family: Source Han Sans CN-Light, Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);

      &::-webkit-scrollbar {
        background: transparent;
        width: 4px;
      }

      /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
      &::-webkit-scrollbar-thumb {
        background: rgba(220, 231, 240, 0.2);
        border-radius: 2px;
      }

      .G4box {
        margin: 0 0 24px;

        .G4Tit {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;

          .G4TitOne {
            font-weight: 700;
            font-size: 22px;
            color: #FFFFFF;
          }

          .G4rightMore {
            padding-right: 10px;
            font-size: 16px;
            cursor: pointer;
          }
        }

        // 企业
        .G41row {
          position: relative;
          padding-left: 30px;
          cursor: pointer;
          font-size: 16px;
          height: 30px;
          line-height: 30px;

          &::before {
            opacity: .5;
            content: '';
            position: absolute;
            top: 50%;
            left: 8px;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background-color: #FFE59F;
            border-radius: 50%;
          }

          &::after {
            content: '';
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 4px;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border: 1px dashed #FFE59F;
            border-radius: 50%;

          }

          &:hover {
            color: #FFE59F;

            &::before {
              opacity: 1;
            }

            &::after {
              opacity: 1;
            }
          }
        }

        // 人物
        .G42row {
          align-items: flex-start;
          display: flex;
          margin-bottom: 20px;

          &>img {
            width: 105px;
            object-fit: contain;
          }

          .G1RenBoxTxt {
            width: calc(100% - 125px);
            margin-left: 20px;
            color: #fff;

            &>h3 {
              font-size: 18px;
              font-weight: 700;
              margin-bottom: 15px;
            }

            &>p {
              font-size: 18px;
              font-family: Source Han Sans CN-Light, Source Han Sans CN;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.8);
              line-height: 1.5;
              white-space: pre-wrap;
            }
          }
        }

        // 重器
        .G43rowBox {
          display: flex;
          flex-wrap: wrap;
        }

        .G43row {
          cursor: pointer;
          margin-bottom: 20px;
          margin-right: 24px;
          width: calc(50% - 24px);
          height: 180px;

          &>img {
            width: 100%;
            height: calc(100% - 30px);
            object-fit: cover;
          }

          &>p {
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding: 0 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

          }
        }

        // 简介
        .G4Txt {
          line-height: 1.7;
          font-size: 18px;
          text-indent: 2em;

        }
      }

    }

    >img.banner {
      flex: 0 0 auto;
      width: 100%;
      height: 34.8%;
      object-fit: contain;
      margin-bottom: 20px;
    }

    >.txt {
      flex: 1 0 1px;
    }
  }

  .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 * 83vh);
      width: calc(653 / 1080 * 83vh);
      height: calc(100% - 74px - 50px);
      max-height: calc(740 / 1080 * 83vh);
      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 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh) calc(50 / 1080 * 83vh);
      display: flex;
      flex-direction: column;

      @media only screen and (max-width: 1700px) {
        right: 0;
      }

      >button.close {
        position: absolute;
        top: calc(30 / 1080 * 83vh);
        right: calc(50 / 1080 * 83vh);
        width: calc(32 / 1080 * 83vh);
        height: calc(32 / 1080 * 83vh);
        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 * 83vh);
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        margin-bottom: calc(21 / 1080 * 83vh);
      }

      >img.splitter {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: calc(37 / 1080 * 83vh);
      }

      >img.banner {
        flex: 0 0 auto;
        width: 100%;
        height: 34.8%;
        object-fit: contain;
        margin-bottom: calc(20 / 1080 * 83vh);
      }

      >.txt {
        flex: 1 0 1px;
        font-size: calc(20 / 1080 * 83vh);
        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 * 83vh);
        margin-right: calc(-10 / 1080 * 83vh);

        &::-webkit-scrollbar {
          background: transparent;
          width: calc(4 / 1080 * 83vh);
        }

        /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
        &::-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>