添加开场教程

src/app.vue

@@ -1,6 +1,7 @@
 <template>
   <LoadingLogo v-if="hadVideo" :thumb="true" />
   <OpenVideo v-else @close="hadVideo = true" />
+    <Guide />
 
   <div class="ui-view-layout" :class="{ show: show }" is-mobile="true">
     <div class="scene" ref="scene$"></div>
@@ -53,6 +54,7 @@ import Information from "@/components/Information";
 import Control from "@/components/Controls/Control.Mobile.vue";
 import LoadingLogo from "@/components/shared/Loading.vue";
 import OpenVideo from "@/components/openVideo/";
+import Guide from '@/components/shared/Guide.vue'
 
 import { createApp } from "@/app";
 import { ref, onMounted, computed, nextTick, watch } from "vue";
@@ -219,11 +221,11 @@ onMounted(async () => {
           let priceMin = Math.min.apply(null, arr);
           let priceMax = Math.max.apply(null, arr);
           let price = priceMin == priceMax ? priceMax : `${priceMin}-${priceMax}`;
-          let range = `${data.products[0].symbol} ${price}`;
+          let range = `${data.products[0]?data.products[0].symbol:'MOP$'} ${price}`;
           return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                       <div class="tag-body">
                         <div data-id="${data.sid}" class="tag-commodity">
-                          <div  style="background-image:url(${data.products[0].pic})" class='tag-avatar'>
+                          <div  style="background-image:url(${data.products[0]?data.products[0].pic:''})" class='tag-avatar'>
                           </div>
                           <p class="tag-title">${data.title}</p>
                           <p class="tag-info">${range} | 查看 ></p>

src/components/Tags/treasure.vue

@@ -6,6 +6,8 @@
         <img :src="require('@/assets/images/icon/gifts_on.png')" alt="" />
         <div @click.stop="goto_now" class="btn">立即前往</div>
       </div>
+      <ui-icon class="close" @click.stop="emit('close')" type="state_f"></ui-icon>
+
     </div>
   </transition>
 </template>
@@ -50,7 +52,7 @@ const goto_now = () => {
   right: 0;
   bottom: 0;
   margin: 0 auto;
-  max-width: 500px;
+  max-width: unset;
   z-index: 101;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
@@ -60,6 +62,7 @@ const goto_now = () => {
   .treasurecon {
     text-align: center;
     width: 90%;
+    max-width: 500px;
     p {
       height: 33px;
       font-size: 24px;
@@ -87,5 +90,13 @@ const goto_now = () => {
       z-index: 99;
     }
   }
+
+  .close{
+    position: absolute;
+    right: 30px;
+    font-size: 20px;
+    top: 50px;
+    color: #000;
+  }
 }
 </style>

src/components/openVideo/index.vue

@@ -3,7 +3,7 @@
     <div class="open-video">
       <!-- <div class="vmask"></div> -->
       <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
-      <div v-show="videourl" @click.stop="countdown==0&&emit('close')" class="jump">{{countdown>0?countdown:'跳過'}}</div>
+      <div v-show="videourl" @click.stop="countdown==0&&emit('close')" class="jump">{{countdown>0?countdown+'秒後可跳過':'跳過'}}</div>
       <img v-show="videourl && bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/icon/bofang.png')" alt="" />
     </div>
   </transition>
@@ -84,6 +84,7 @@ onMounted(() => {
   table-layout: fixed;
   z-index: 110;
   background-color: rgba(0, 0, 0, 1);
+
   .bofang {
     position: absolute;
     top: 50%;
@@ -117,13 +118,13 @@ onMounted(() => {
     position: absolute;
     right: 15px;
     top: 20px;
-    width: 56px;
-    height: 28px;
     background: rgba(0, 0, 0, 0.5);
-    border-radius: 16px;
     text-align: center;
     line-height: 28px;
+    font-size: 20px;
     z-index: 999;
+    border-radius: 1px;
+    padding: 10px 16px;
   }
 }
 </style>

src/components/shared/Guide.vue

@@ -0,0 +1,246 @@
+<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 setup>
+import { onMounted, watch, computed, ref, nextTick } from 'vue'
+import { useApp } from '@/app'
+import browser from "@/utils/browser";
+
+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
+        // }
+    })
+})
+</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);
+}
+.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%);
+    }
+
+    @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;
+            }
+        }
+    }
+}
+</style>