update

src/components/Controls/Panel/Main.vue

@@ -1,138 +1,139 @@
 <template>
-  <Panel v-show="player.showWidgets" :isOpen="isOpen">
-    <div @click="toggleOpen" class="menu color">
-      <div class="logo">
-        <img :src="require('@/assets/images/icon/logo.png')" alt="" />
-        <p>cdf澳門上葡京店</p>
-      </div>
-      <div class="vline"></div>
-      <ul>
-        <li v-if="tours.length > 0">
-          <ui-icon type="preview" @click.stop="playTour"></ui-icon>
-          <div>導覽</div>
-        </li>
-        <li @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
-          <ui-icon :type="item.icon"></ui-icon>
-          <div>{{ item.name }}</div>
-        </li>
-
-        <li v-if="showdaogou">
-          <ui-icon
-            type="guided_shopping"
-            @click.stop="
-              onClickMenu({
-                icon: 'guided_shopping',
-                id: 'guided_shopping',
-                name: '導購',
-              })
-            "
-          ></ui-icon>
-          <div>導購</div>
-        </li>
-
-        <li>
-          <ui-icon
-            type="shopping"
-            @click.stop="
-              onClickMenu({
-                icon: 'shopping',
-                id: 'shopping',
-                name: '購物',
-              })
-            "
-          ></ui-icon>
-          <div>購物</div>
-        </li>
-      </ul>
-    </div>
-
-    <div class="toolbar color">
-      <div class="navigation">
-        <div class="h3">
-          <span>專櫃導航</span>
-          <div @click="showShopList = true">
-            <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
-            搜索專櫃
-          </div>
-        </div>
-        <div class="swiper-container" id="sw-navigation">
-          <ul class="swiper-wrapper">
-            <li
-              class="swiper-slide"
-              :class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
-              @click.stop="onClickShop(item)"
-              v-for="(item, i) in brandlist"
-              :key="i"
-            >
-              <div v-if="item.shopLogo" class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
-              <div class="name" v-if="item.shopName">
-                <span :class="{ active: item.shopName.length > 6 }">
-                  {{ item.shopName }}
-                </span>
-              </div>
-            </li>
-          </ul>
+  <div>
+    <Panel v-show="player.showWidgets" :isOpen="isOpen">
+      <div @click="toggleOpen" class="menu color">
+        <div class="logo">
+          <img :src="require('@/assets/images/icon/logo.png')" alt="" />
+          <p>cdf澳門上葡京店</p>
         </div>
-      </div>
+        <div class="vline"></div>
+        <ul>
+          <li v-if="tours.length > 0">
+            <ui-icon type="preview" @click.stop="playTour"></ui-icon>
+            <div>導覽</div>
+          </li>
+          <li @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
+            <ui-icon :type="item.icon"></ui-icon>
+            <div>{{ item.name }}</div>
+          </li>
+
+          <li v-if="showdaogou">
+            <ui-icon
+              type="guided_shopping"
+              @click.stop="
+                onClickMenu({
+                  icon: 'guided_shopping',
+                  id: 'guided_shopping',
+                  name: '導購',
+                })
+              "
+            ></ui-icon>
+            <div>導購</div>
+          </li>
 
-      <div class="category">
-        <div class="swiper-container" id="sw-category">
-          <ul class="swiper-wrapper">
-            <li
-              class="swiper-slide"
-              :class="{ categoryactive: '' == currentCategory.id }"
+          <li>
+            <ui-icon
+              type="shopping"
               @click.stop="
-                onClickCategory({
-                  id: '',
-                  categoryName: '全部',
+                onClickMenu({
+                  icon: 'shopping',
+                  id: 'shopping',
+                  name: '購物',
                 })
               "
-            >
-              <div>全部</div>
-            </li>
-            <li
-              @click.stop="onClickCategory(item)"
-              :class="{ categoryactive: item.id == currentCategory.id }"
-              class="swiper-slide"
-              v-for="(item, i) in categorylist"
-              :key="i"
-            >
-              <div>{{ item.categoryName }}</div>
-            </li>
-          </ul>
-        </div>
+            ></ui-icon>
+            <div>購物</div>
+          </li>
+        </ul>
       </div>
-    </div>
 
-    <div v-show="showShopList" class="shoplist">
-      <div class="l-title">
-        專櫃列表 ({{searchList.length}})
-        <ui-icon type="close" @click="showShopList = false" />
-      </div>
+      <div class="toolbar color">
+        <div class="navigation">
+          <div class="h3">
+            <span>專櫃導航</span>
+            <div @click="showShopList = true">
+              <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
+              搜索專櫃
+            </div>
+          </div>
+          <div class="swiper-container" id="sw-navigation">
+            <ul class="swiper-wrapper">
+              <li
+                class="swiper-slide"
+                :class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
+                @click.stop="onClickShop(item)"
+                v-for="(item, i) in brandlist"
+                :key="i"
+              >
+                <div v-if="item.shopLogo" class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
+                <div class="name" v-if="item.shopName">
+                  <span :class="{ active: item.shopName.length > 6 }">
+                    {{ item.shopName }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
 
-      <div class="search">
-        <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
-        <input v-model="searchKey" type="text" placeholder="專櫃搜索" />
-        <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = ''" type="state_f"></ui-icon>
+        <div class="category">
+          <div class="swiper-container" id="sw-category">
+            <ul class="swiper-wrapper">
+              <li
+                class="swiper-slide"
+                :class="{ categoryactive: '' == currentCategory.id }"
+                @click.stop="
+                  onClickCategory({
+                    id: '',
+                    categoryName: '全部',
+                  })
+                "
+              >
+                <div>全部</div>
+              </li>
+              <li
+                @click.stop="onClickCategory(item)"
+                :class="{ categoryactive: item.id == currentCategory.id }"
+                class="swiper-slide"
+                v-for="(item, i) in categorylist"
+                :key="i"
+              >
+                <div>{{ item.categoryName }}</div>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
+    </Panel>
+    <teleport :to="`#app`">
+      <div v-show="showShopList" class="shoplist">
+        <div class="l-title">
+          專櫃列表 ({{ searchList.length }})
+          <ui-icon type="close" @click="showShopList = false" />
+        </div>
 
-      <ul v-if="searchList.length > 0">
-        <li
-        @click.stop="onClickShop(item)"
-         v-for="(item, idx) in searchList" :key="idx">
-          <div class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
-          <div class="name" v-if="item.shopName">
-            <span :class="{ active: item.shopName.length > 6 }">
-              {{ item.shopName }}
-            </span>
-          </div>
-          <ui-icon class="right" type="right"></ui-icon>
-        </li>
-      </ul>
+        <div class="search">
+          <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
+          <input v-model="searchKey" type="text" placeholder="專櫃搜索" />
+          <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = ''" type="state_f"></ui-icon>
+        </div>
 
-      <div class="noresult" v-else>暫無結果</div>
-    </div>
-  </Panel>
+        <ul v-if="searchList.length > 0">
+          <li @click.stop="onClickShop(item)" v-for="(item, idx) in searchList" :key="idx">
+            <div class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
+            <div class="name" v-if="item.shopName">
+              <span>
+                {{ item.shopName }}
+              </span>
+            </div>
+            <ui-icon class="right" type="right"></ui-icon>
+          </li>
+        </ul>
+
+        <div class="noresult" v-else>暫無結果</div>
+      </div>
+    </teleport>
+  </div>
 </template>
 
 <script setup>
@@ -329,7 +330,6 @@ const getSearchList = async () => {
     shopName: searchKey.value,
   });
   searchList.value = res.data;
-  console.log(searchList.value);
 };
 
 onMounted(() => {
@@ -612,7 +612,7 @@ onMounted(() => {
   }
 }
 
-.noresult{
+.noresult {
   text-align: center;
   margin-top: 20vh;
 }