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

<template>
  <div v-if="show && isMobile" class="user-guide-overlay">
    <div class="user-guide-mobile">
      <div class="zh">
        <div class="btn" @click="onSet"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { useApp } from '/@/hooks/userApp';
  import { useAppStore } from '/@/store/modules/app';
  import browser from '/@/utils/browser';

  const appStore = useAppStore();
  const isMobile = browser.isMobile();

  const show = computed(() => appStore.player.showUserGuide);
  // const store = useStore();

  const onSet = () => {
    // store.commit("showUserGuide", false);
    // localStorage.setItem("user_guide", Date.now());
  };
  // const getTips = (tips) => {
  //   let text = tips.split("<br />");
  //   return `<span>${text[0]}</span><div>${text[1]}</div>`;
  // };
  useApp().then((app) => {
    app.Scene.on('loaded', () => {
      if (!localStorage.getItem('user_guide')) {
        // store.commit("showUserGuide", true);
      }
    });
  });
</script>
<style lang="scss" scoped>
  .user-guide-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1099999;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .user-guide {
    white-space: normal;
    position: absolute;
    top: 50%;
    left: 1.2rem;
    right: 1.2rem;
    border-radius: 0.15rem;
    color: #fff;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    .main {
      padding: 0.8rem;
      padding-bottom: 0;
      h4 {
        margin: 0;
        font-size: 0.5rem;
        text-align: center;
      }
      ul,
      li {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
      }
      ul {
        margin: 0.4rem 0;
      }
      li {
        display: flex;
        align-items: center;
        padding: 0.6rem 0;
        i {
          font-size: 1.2rem;
        }
        > div {
          line-height: 1.6;
          font-size: 0.4rem;
          margin-left: 0.35rem;
        }
      }

      button {
        width: 100%;
        margin-bottom: 0.5rem;
        background-color: #fff;
        font-size: 0.4rem;
        color: #444;
        height: 1.1rem;
        border: none;
        border-radius: 0.15rem;
        &[type='submit'] {
          color: #fff;
          background-color: transparent;
        }
      }
    }

    @media (orientation: landscape) {
      width: 400px;
      left: 50% !important;
      right: auto !important;
      margin-left: -200px;
      .main {
        padding: 0.5rem;
        h4 {
          font-size: 0.35rem;
        }
        ul {
          margin: 0.3rem 0;
        }
        li {
          padding: 0.1rem 0;
          i {
            font-size: 0.6rem;
          }
          > div {
            font-size: 0.25rem;
          }
        }

        button {
          margin-bottom: 0rem;
          font-size: 0.3rem;
          height: 0.8rem;
        }
      }
    }
  }
  .user-guide-mobile {
    position: absolute;
    top: 3.15789rem;
    left: 50%;
    width: 7.89474rem;
    transform: translateX(-50%);
    .zh {
      width: 100%;
      height: 7rem;
      background-image: url(~@/assets/images/guide/novice_guide_text@2x.png);
      background-size: contain;
      background-position: center top;
      background-repeat: no-repeat;
    }
    .en {
      width: 100%;
      color: #fff;
      ul,
      li {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
      }
      ul {
        margin: 0;
      }
      li {
        display: flex;
        align-items: flex-start;
        padding: 0.5rem 0;
        &:first-child {
          padding-top: 0;
        }
        i {
          font-size: 1.32rem;
        }
        > div {
          font-size: 0.4rem;
          margin-left: 0.3rem;
          :deep(span) {
            font-size: 0.6rem;
            color: #00c2c4;
          }
          :deep(div) {
            font-size: 0.5rem;
            margin-top: 0.1rem;
            white-space: pre-line;
            line-height: 1.3;
          }
        }
      }

      .btn {
        background-image: none;
        color: #00c2c4;
        line-height: 1.2rem;
        text-align: center;
        font-size: 0.52632rem;
        background-image: url(~@/assets/images/guide/novice_guide_button_empty@2x.png);
      }
    }
    .btn {
      position: absolute;
      bottom: -3.15789rem;
      left: 50%;
      width: 3.5rem;
      height: 1.31579rem;
      background-image: url(~@/assets/images/guide/novice_guide_button@2x.png);
      background-size: contain;
      background-position: center top;
      background-repeat: no-repeat;
      transform: translateX(-50%);
    }

    .guide-tips {
      font-size: 16px;
      margin-top: 1rem;
      line-height: 1.5;
    }

    @media (orientation: landscape) {
      top: 0.5rem;
      .zh {
        height: 4rem;
        .btn {
          width: 2.5rem;
          height: 0.8rem;
          bottom: -1.4rem;
        }
      }

      .en {
        li {
          padding: 0.15rem 0;
          i {
            font-size: 1rem;
          }
          > div {
            margin-left: 0.3rem;
            :deep(span) {
              font-size: 0.3rem;
            }
            :deep(div) {
              font-size: 0.25rem;
              margin-top: 0.1rem;
            }
          }
        }
        .btn {
          height: 0.7rem;
          line-height: 0.63rem;
          font-size: 0.25rem;
          bottom: -0.7rem;
        }
      }
    }
  }

  @media (orientation: landscape) {
    .user-guide-mobile {
      overflow-y: auto;
    }
  }
</style>