|
@@ -1,246 +1,272 @@
|
|
|
<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 v-if="show && isMobile" class="user-guide-overlay">
|
|
|
+ <div class="user-guide-mobile">
|
|
|
+ <div class="en" v-if="lang === 'en'">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <span>Walk</span>
|
|
|
+ <div>Click to move</div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <span>Roam</span>
|
|
|
+ <div>Swipe the screen to roam the screen to roam</div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <span>Zoom</span>
|
|
|
+ <div>Zoom in or out</div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="btn" @click="onSet">Got it</div>
|
|
|
+ </div>
|
|
|
+ <div class="zh" v-else>
|
|
|
+ <div class="btn" @click="onSet"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { onMounted, watch, computed, ref, nextTick } from 'vue'
|
|
|
-import { useApp } from '@/app'
|
|
|
+import { onMounted, watch, computed, ref, nextTick } from "vue";
|
|
|
+import { useApp } from "@/app";
|
|
|
import browser from "@/utils/browser";
|
|
|
|
|
|
-const isMobile = browser.isMobile()
|
|
|
+const lang = computed(() => browser.getURLParam("lang"));
|
|
|
|
|
|
-const show = ref(false)
|
|
|
+const isMobile = browser.isMobile();
|
|
|
+
|
|
|
+const show = ref(false);
|
|
|
const onSet = () => {
|
|
|
- show.value = 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')) {
|
|
|
- show.value = true
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
+ show.value = 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", () => {
|
|
|
+ // show.value = true;
|
|
|
+ if (!localStorage.getItem("user_guide")) {
|
|
|
+ show.value = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.user-guide-overlay {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 100000;
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 100000;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- @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 {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- button {
|
|
|
- margin-bottom: 0rem;
|
|
|
- font-size: 0.3rem;
|
|
|
- height: 0.8rem;
|
|
|
- }
|
|
|
+ @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: 1.55789rem;
|
|
|
- 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;
|
|
|
+ position: absolute;
|
|
|
+ top: 1.55789rem;
|
|
|
+ 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%;
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
-
|
|
|
- .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);
|
|
|
+ :deep(div) {
|
|
|
+ font-size: 0.5rem;
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ white-space: pre-line;
|
|
|
+ line-height: 1.3;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.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%);
|
|
|
+ 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%);
|
|
|
+ }
|
|
|
|
|
|
- @media (orientation: landscape) {
|
|
|
- top: 0.5rem;
|
|
|
- .zh {
|
|
|
- height: 4rem;
|
|
|
- .btn {
|
|
|
- width: 2.5rem;
|
|
|
- height: 0.8rem;
|
|
|
- bottom: -1.4rem;
|
|
|
- }
|
|
|
- }
|
|
|
+ @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;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|