daikan-international/src/components/basic/title.vue

<template>
  <div class="header" @touchmove.prevent v-if="!isPanoramaMode">
    <div class="left" :class="{ show: !isTourMode }">
      <div v-show="!isPanoramaMode" class="back-pano" @click="onChangeMode">
        <i
          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-show_back iconzm-show_back"
        ></i>
      </div>
      <div v-show="isPanoramaMode" class="back" @click="onBack">
        <i
          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-_back iconzm-_back"
        ></i>
      </div>
    </div>
    <div
      class="title"
      :class="{
        up: player.showDescription,
        dark: !isPanoramaMode,
        empty: !description,
      }"
      @click="onShowDescription"
      v-show="player.showWidgets"
    >
      <div>
        <span>
          {{ metadata.title }}
          <i class="iconfont icon-pull-down"></i>
        </span>
      </div>
    </div>
    <div class="right" v-show="player.showWidgets" @click="onShowMore">
      <i class="iconfont icon-show_more_share"></i>
    </div>
    <transition
      appear
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp short faster"
      leave-active-class="animated fadeOutDown short faster"
    >
      <div
        class="content"
        :class="{ dark: !isPanoramaMode }"
        v-if="player.showDescription"
        @click="onShowDescription"
      >
        <div>
          <div v-html="description"></div>
        </div>
      </div>
    </transition>
    <teleport to="body">
      <div class="url-share" v-show="showCopy" @click="showCopy = false">
        <img :src="shareImage" alt="" />
      </div>
    </teleport>
  </div>
</template>
<script setup lang="ts">
  //@ts-nocheck
  import browser from '/@/utils/browser';
  // import { useStore } from "vuex";
  // import { Dialog } from "@/global_components/";
  // import { useMusicPlayer } from "@/utils/sound";
  import { onMounted, watch, computed, ref, nextTick } from 'vue';
  import shareImage from '/@/assets/share.png';
  import { useAppStore } from '/@/store/modules/app';
  import { useSceneStore } from '/@/store/modules/scene';
  // import { useApp, getApp } from "@/app";
  const appStore = useAppStore();
  const sceneStore = useSceneStore();
  let share_url = browser.getURLParam('share_url');
  if (share_url) {
    share_url = decodeURIComponent(share_url);
  } else {
    share_url = `${location.origin}${location.pathname}?m=${browser.getURLParam('m')}`;
  }

  const isTourMode = computed(() => appStore.isTourMode);

  // const musicPlayer = useMusicPlayer()
  // const store = useStore();
  const metadata = computed(() => sceneStore.metadata);
  // const controls = computed(() => {
  //   return sceneStore.metadata.controls;
  // });
  // const showMusicPlaying = ref(false);
  // const showMusic = computed(() => sceneStore.metadata.music);
  const player = computed(() => appStore.player);

  // const copy$ = ref(null);
  // const copyLink = ref(share_url);
  const showCopy = ref(false);
  const showShare = ref(false);
  // const isMusicPlaying = ref(false);

  // const mode = computed(() => appStore.mode);
  const isPanoramaMode = computed(() => appStore.mode === 'panorama');
  const description = computed(() => metadata.value.description);
  watch(
    () => showCopy.value,
    (_) => {
      appStore.setPlayerOptions({
        showMap: !showCopy.value,
        showToolbar: !showCopy.value,
      });
    },
    {
      deep: true,
    },
  );
  watch(
    () => showShare.value,
    (_) => {
      appStore.setPlayerOptions({
        showMap: !showShare.value,
        showToolbar: !showShare.value,
      });
    },
    {
      deep: true,
    },
  );

  onMounted(() => {
    // new ClipboardJS(copy$.value.$el).on('success', function (e) {
    //     e.clearSelection()
    //     showCopy.value = false
    //     Dialog.toast({ content: '场景链接复制成功', type: 'success' })
    // })

    nextTick(() => {
      document.querySelector('.player')?.addEventListener('touchstart', () => {
        if (player.value.showMore) {
          appStore.setPlayerOptions({
            showMore: false,
            showMap: true,
            showToolbar: true,
          });
          // store.commit("SetPlayerOptions", {
          //   showMore: false,
          //   showMap: true,
          //   showToolbar: true,
          // });
        } else if (player.value.showDescription) {
          appStore.setPlayerOptions({
            showDescription: false,
            showMap: true,
            showToolbar: true,
          });
        }
      });

      (window as any).Back = () => {
        onBack();
      };
      // musicPlayer.on('play', () => (showMusicPlaying.value = true))
      // musicPlayer.on('pause', () => (showMusicPlaying.value = false))
    });
  });
  const onBack = () => {
    player.value.showVR && appStore.showVR();
  };
  const onShowMore = () => {
    showCopy.value = true;
    // let show = !player.value.showMore
    // store.commit('SetPlayerOptions', {
    //     showMore: show,
    //     showMap: show == false,
    //     showToolbar: show == false,
    //     showDescription: false,
    // })
  };
  const onShowDescription = () => {
    let show = !player.value.showDescription;

    appStore.setPlayerOptions({
      showMore: false,
      showMap: show == false,
      showToolbar: show == false,
      showDescription: show,
    });
  };
  // const onMusicClick = () => {
  //   showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play();
  // };
  // const onMenuClick = (name) => {
  //   appStore.setPlayerOptions({
  //     showMore: false,
  //     showDescription: false,
  //     showMap: true,
  //     showToolbar: true,
  //   });

  // nextTick(() => {
  //   if (name == "music") {
  //     onMusicClick();
  //   } else if (name == "share") {
  //     showCopy.value = true;
  //   } else if (name === "measure") {
  //     this.$bus.emit("measure/Handle", "start");
  //   } else if (name == "vr") {
  //     store.commit("showVR");
  //   }
  // });
  // };
  // const onShare = (name) => {
  //   if (name == 'copy') {
  //     showShare.value = false;
  //     this.$nextTick(() => {
  //       showCopy.value = true;
  //     });
  //   }
  // };
  const onChangeMode = () => {
    //   store.commit("setMode", "panorama");
    appStore.setMode('panorama');
  };
</script>

<style lang="scss" scoped>
  .disable {
    opacity: 1;
  }
  .header {
    position: absolute;
    top: 0.3rem;
    left: 0;
    height: 40px;
    width: 100%;
    z-index: 101;
    color: #fff;
    display: flex;
    align-items: center;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
    &.app {
      top: 1rem;
    }
    .left {
      width: 1rem;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &.show {
        visibility: visible;
        pointer-events: auto;
        .back {
          visibility: visible;
        }
      }
      .back {
        width: 0.78rem;
        height: 0.78rem;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        position: relative;
        i {
          font-size: 0.3rem;
          width: auto;
          position: static;
        }
      }
      .back-pano {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // padding-left: 15px;
        position: relative;
        i {
          font-size: 0.6rem;
          position: static;
        }
      }
    }
    .right {
      position: relative;
      width: 1.28rem;
      height: 100%;
      padding-right: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      z-index: 11;
      > i {
        font-size: 0.45rem;
        color: rgba(255, 255, 255, 0.88);
      }
      > div {
        position: absolute;
        display: flex;
        flex-direction: column;
        right: 10px;
        top: 1.3rem;
        padding: 4px 0.42105rem;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        &::after {
          content: '';
          position: absolute;
          top: -5px;
          right: 0.3rem;
          width: 0;
          height: 0;
          border-width: 0 5px 5px;
          border-style: solid;
          border-color: transparent transparent rgba(0, 0, 0, 0.5);
        }
        &.flex {
          li {
            span {
              flex: 1;
              width: auto;
              // min-width: 2.8rem;
            }
          }
        }
        li {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          // margin-top: 0.3rem;
          font-size: 0;
          // height: .5333rem;
          padding: 0.1333rem 0 0.2667rem;
          i {
            // position: absolute;
            // left: 0;
            // top: 0;
            // font-size: 0.45rem;
            font-size: 0.3733rem;
            margin-right: 0.4rem;
          }
          b {
            position: absolute;
            left: 0.32rem;
            top: 0.33rem;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #00c2c4;
            i {
              color: #fff;
              font-size: 12px;
              transform: scale(0.3, 0.3);
              top: -4px;
              left: -3px;
              position: absolute;
            }
          }
          span {
            width: 1.89474rem;
            white-space: nowrap;
            text-align: left;
            // padding-bottom: 0.3rem;
            // margin-left: 0.75rem;
            font-size: 0.3733rem;
            // text-indent: 0.2rem;
            // padding-right: 0.2rem;
          }
        }

        .home {
          border-top: solid 1px rgba(255, 255, 255, 0.4);
          a {
            width: 1.89474rem;
            margin-top: 0.3rem;
            margin-bottom: 0.1rem;
            margin-left: auto;
            margin-right: auto;
            display: block;
            text-decoration: none;
            overflow: hidden;

            img {
              width: 100%;
              outline: none;
              border: none;
            }
          }
        }
      }
    }
    .title {
      display: flex;
      flex: 1;
      width: 100%;
      height: 100%;
      font-size: 14px;
      letter-spacing: 1px;
      align-items: center;
      justify-content: center;
      > div {
        display: flex;
        transition: background 0.3s ease, min-width 0.3s ease, border-radius 0.3s ease;
        align-items: center;
        justify-content: center;
        padding-right: 12px;
        padding-left: 12px;
        white-space: nowrap;
        position: absolute;
        height: 100%;
        min-width: 100%;
        overflow: visible;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(0, 0, 0, 0.2) 29%,
          rgba(0, 0, 0, 0.2) 69%,
          transparent
        );
      }
      span {
        display: inline-block;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 7rem;
        display: inline-block;
        padding-right: 20px;
        i {
          position: absolute;
          right: 0;
          color: #fff;
          font-size: 10px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          vertical-align: bottom;
          line-height: normal;
        }
      }

      &.up {
        i {
          transform: translateY(-50%) rotate(180deg);
        }
        > div {
          min-width: 0;
          //position: static;
          flex-shrink: 0;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 1.15789rem;
        }
        &.dark {
          > div {
            background-color: rgba(0, 0, 0, 0.8);
          }
        }
      }

      &.empty {
        i {
          display: none;
        }
      }
    }
    .content {
      position: absolute;
      top: 1.2rem;
      left: 0.92105rem;
      right: 0.92105rem;
      padding: 10px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 5px;
      font-size: 0.36842rem;
      text-align: center;
      &.dark {
        background: rgba(0, 0, 0, 0.8);
      }
      > div {
        display: inline-block;
        text-align: left;
        letter-spacing: 1px;
        word-break: break-all;
        white-space: normal;
        line-height: 1.5;
        // h4 {
        //     margin: 0;
        //     padding: 0;
        //     margin-bottom: 0.28rem;
        //     font-size: 0.43rem;
        //     padding-left: 0.18789rem;
        //     width: 100%;
        //     position: relative;
        //     &::before {
        //         content: "";
        //         position: absolute;
        //         left: 0;
        //         top: 50%;
        //         height: 80%;
        //         transform: translateY(-50%);
        //         width: 2px;
        //         background-color: var(--editor-main-color);
        //     }
        // }

        :deep(p) {
          word-break: break-word;
        }

        :deep(a) {
          color: var(--editor-main-color);
        }
      }
      // &::after {
      //     content: "";
      //     position: absolute;
      //     top: -6px;
      //     left: 50%;
      //     margin-left: -3px;
      //     width: 0;
      //     height: 0;
      //     border-width: 0 7px 6px;
      //     border-style: solid;
      //     border-color: transparent transparent rgba(0, 0, 0, 0.5);
      // }
    }

    .app-share {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      color: var(--editor-main-color);
      text-shadow: none;
      border-radius: 0.146667rem 0.146667rem 0px 0px;
      i {
        // font-size: 2rem;
        font-size: 1rem;
        margin: 0.666667rem 0 0.106667rem;
        display: inline-block;
      }
      ul {
        // display: flex;
        // justify-content: space-around;
        overflow: hidden;
        div {
          text-align: center;
          // margin-top: -0.3rem;
          font-size: 0.34rem;
        }
        li {
          width: 33.3%;
          float: left;
          // padding-bottom: 0.5rem;
          overflow: hidden;
          text-align: center;
          // i{
          //   font-size: 2rem;
          // }
        }
        &.flex {
          display: flex;
          li {
            float: none;
          }
        }
      }
      > div {
        height: 1.293333rem;
        font-size: 16px;
        text-align: center;
        // padding: 0.5rem;
        border-top: solid 1px #eeeeee;
        margin-top: 0.466667rem;
        line-height: 1.293333rem;
      }
    }
  }
  .url-share {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.8);
    > img {
      position: absolute;
      width: 61.6%;
      top: 12px;
      right: 6.4%;
    }

    > div {
      position: absolute;
      left: 0.6rem;
      right: 0.6rem;
      top: 50vh;
      transform: translateY(-50%);
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 0.31579rem;
      font-size: 0.36842rem;
      .tips {
        display: flex;
        align-items: center;
        justify-content: space-between;
        h4 {
          margin: 0;
          font-size: 0.42105rem;
        }
        i {
          font-size: 0.6rem;
        }
      }
      .url {
        display: -webkit-box;
        color: #fff;
        text-align: center;
        padding: 0.26316rem;
        width: 100%;
        height: 1.8rem;
        margin: 0.7rem 0rem;
        border-radius: 0.07rem;
        line-height: 1.99;
        font-size: 0.36842rem;
        background-color: rgba(0, 0, 0, 0.35);
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
        -webkit-line-clamp: 2; //在第幾行加省略號
        -webkit-box-orient: vertical;
      }
      .btns {
        display: flex;
        justify-content: space-between;
        button {
          font-size: 0.36842rem;
          width: 47%;
          height: 1.05263rem;
          border-radius: 1.05263rem;
          &.submit {
            background: #00c2c4;
          }
        }
      }
    }
  }
  @media (orientation: landscape) {
    .header {
      top: 0.2rem;
      height: 0.7rem;
      &.app {
        top: 0.2rem;
      }
      .left {
        .back-pano {
          i {
            font-size: 0.5rem;
          }
        }
      }
      .right {
        > i {
          font-size: 0.5rem;
        }
        > div {
          right: 10px;
          top: 0.75rem;
          padding: 4px 0.2rem;
          &::after {
            right: 0.23rem;
          }
          li {
            margin-top: 0.15rem;
            i {
              font-size: 0.3rem;
            }
            b {
              left: 0.2rem;
              top: 0.15rem;
            }
            span {
              padding-bottom: 0.15rem;
              margin-left: 0.5rem;
              font-size: 0.25rem;
            }
          }

          .home {
            a {
              margin-top: 0.15rem;
              margin-bottom: 0rem;
              width: 1.4rem;
            }
          }
        }
      }
      .title {
        font-size: 0.3rem;
      }
      .content {
        top: 1rem;
        left: 2rem;
        right: 2rem;
        padding: 10px;

        > div {
          max-height: 3rem;
          font-size: 0.25rem;
          line-height: 1.5;
        }
      }
    }
  }

  // ipad 橫屏
  @media only screen and (min-device-width: 768px) and (orientation: landscape) {
    .header {
      height: 0.8rem;
      .title {
        i {
          margin-bottom: 0;
        }
      }
    }
  }
  // @media only screen and (min-device-width: 768px) and (orientation: portrait) {

  // }
</style>
<style lang="scss">
  .animated.short {
    &.faster {
      animation-duration: 0.3s;
    }
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
      }
      to {
        opacity: 1;
        transform: translateZ(0);
      }
    }
    @keyframes fadeOutDown {
      0% {
        opacity: 1;
      }
      to {
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
      }
    }
  }
</style>