feat: 标题修改为二级分类

components.d.ts

@@ -7,11 +7,14 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/global.d.ts

@@ -8,4 +8,7 @@ interface Window {
   /** 获取热点 iframe 路径 */
   getHotIframePath: (str: string) => string;
   $: JQuery;
+  browser: {
+    isMobile(): boolean;
+  };
 }

src/views/home/components/title/index.zgrs.scss

@@ -31,6 +31,13 @@
   }
 }
 
+.scene-sublist {
+  --el-text-color-regular: white;
+  --el-bg-color-overlay: transparent;
+  --el-dropdown-menuItem-hover-fill: rgba(203, 25, 29, 0.5);
+  --el-dropdown-menuItem-hover-color: white;
+}
+
 @media only screen and (max-width: 600px) {
   .scene-title {
     width: 100%;

src/views/home/components/title/index.zgrs.vue

@@ -82,13 +82,65 @@
     <template #dropdown>
       <el-scrollbar max-height="400px">
         <el-dropdown-menu>
-          <el-dropdown-item
-            v-for="item in LIST"
-            :key="item.sceneCode"
-            class="scene-list-item"
-            @click="changeScene(item.sceneCode)"
-            >{{ item.label }}</el-dropdown-item
-          >
+          <!-- pc hover展示 -->
+          <template v-if="!isMobile">
+            <el-tooltip
+              v-for="item in LIST"
+              :key="item.label"
+              append-to="body"
+              effect="dark"
+              :placement="isMobile ? 'bottom' : 'right'"
+              popper-class="scene-list-subitem-popup"
+              :show-arrow="false"
+              :trigger="isMobile ? 'click' : 'hover'"
+              :disabled="!item.children.length"
+            >
+              <li
+                class="scene-list-item el-tooltip__trigger el-tooltip__trigger el-dropdown-menu__item"
+              >
+                {{ item.label }}
+              </li>
+
+              <template #content>
+                <el-scrollbar max-height="400px">
+                  <el-dropdown-menu class="scene-sublist">
+                    <el-dropdown-item
+                      v-for="subitem in item.children"
+                      :key="subitem.sceneCode"
+                      class="scene-sublist-item"
+                      @click="changeScene(subitem.sceneCode, subitem.params)"
+                    >
+                      {{ subitem.label }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-scrollbar>
+              </template>
+            </el-tooltip>
+          </template>
+
+          <!-- 移动端 手风琴展示 -->
+          <template v-else>
+            <el-collapse accordion class="scene-title-collapse">
+              <el-collapse-item v-for="item in LIST" :key="item.label" :name="item.label">
+                <template #title>
+                  <div class="scene-title-collapse-item">
+                    {{ item.label }}
+                  </div>
+                </template>
+
+                <el-dropdown-menu class="scene-sublist">
+                  <el-dropdown-item
+                    v-for="subitem in item.children"
+                    :key="subitem.sceneCode"
+                    class="scene-sublist-item"
+                    @click="changeScene(subitem.sceneCode, subitem.params)"
+                  >
+                    {{ subitem.label }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-collapse-item>
+            </el-collapse>
+          </template>
         </el-dropdown-menu>
       </el-scrollbar>
     </template>
@@ -96,67 +148,213 @@
 </template>
 
 <script setup lang="ts">
+  import { ref, watch } from 'vue';
+
+  const props = defineProps<{
+    isInit: boolean;
+  }>();
+
   const LIST = [
     {
-      label: '光大汇晨-3号楼外景',
-      sceneCode: 'KJ-In9jsvCe86s',
-    },
-    {
-      label: '光大汇晨-4号、5号楼外景',
-      sceneCode: 'KJ-ZMFs8MxP2SB',
-    },
-    {
-      label: '光大4号楼-前台大厅',
-      sceneCode: 'KJ-WklncxbyqUz',
-    },
-    {
-      label: '光大4-1号楼-1F',
-      sceneCode: 'KJ-8yXDk9BK7NQ',
-    },
-    {
-      label: '光大4-1号楼-3F',
-      sceneCode: 'KJ-InMhgveLjSN',
-    },
-    {
-      label: '光大4-1号楼-4F',
-      sceneCode: 'KJ-Z3umjaDYj54',
-    },
-    {
-      label: '光大4-1号楼-5F',
-      sceneCode: 'KJ-KWa3ofq5VtT',
-    },
-    {
-      label: '光大4-1号楼-6F',
-      sceneCode: 'KJ-f3lOsooRQEL',
-    },
-    {
-      label: '光大4-2号楼-2F',
-      sceneCode: 'KJ-mK2fUzsBliv',
-    },
-    {
-      label: '光大4-2号楼-3F',
-      sceneCode: 'KJ-HuSSF9cJYpY',
+      label: '外景展示',
+      children: [
+        {
+          label: '光大汇晨-3号楼外景',
+          sceneCode: 'KJ-In9jsvCe86s',
+        },
+        {
+          label: '光大汇晨-4号、5号楼外景',
+          sceneCode: 'KJ-ZMFs8MxP2SB',
+        },
+        {
+          label: '光大汇晨-后花园',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:244,qua:0.039007937897505625,0.9142990295337833,0.09079670316256798,-0.3927997197919962',
+        },
+      ],
     },
     {
-      label: '光大4-2号楼-4F',
-      sceneCode: 'KJ-SfNcYJffCof',
+      label: '房型展示',
+      children: [
+        {
+          label: '4-1号楼6层 双人居室',
+          sceneCode: 'KJ-f3lOsooRQEL',
+          params:
+            '&firstView=pano:32,qua:-0.051998504111525345,-0.014998504545882635,-0.0007810446053117947,0.9985342235607464',
+        },
+        {
+          label: '4-2号楼4层 双人自理间',
+          sceneCode: 'KJ-SfNcYJffCof',
+          params:
+            '&firstView=pano:16,qua:-0.07389770295455884,-0.022001805388514675,-0.001630739657061169,0.9970217626634693',
+        },
+      ],
     },
     {
-      label: '光大4-2号楼-5F',
-      sceneCode: 'KJ-nOTU5Eg4Y0Y',
+      label: '功能性房间展示',
+      children: [
+        {
+          label: '光大4号楼-前台大厅',
+          sceneCode: 'KJ-WklncxbyqUz',
+        },
+        {
+          label: '光大5号楼-前台大厅',
+          sceneCode: 'KJ-YNQbf4hmdhp',
+        },
+        {
+          label: '4-1号楼1层 桌球台',
+          sceneCode: 'KJ-8yXDk9BK7NQ',
+          params:
+            '&firstView=pano:36,qua:-0.13839545703172249,-0.008993664428416585,-0.0012568289632250125,0.9903354179400402',
+        },
+        {
+          label: '4-1号楼1层 健身区域',
+          sceneCode: 'KJ-8yXDk9BK7NQ',
+          params:
+            '&firstView=pano:42,qua:-0.20459884853874494,0.334008449059796,0.07451714944112271,0.9170740759282797',
+        },
+        {
+          label: '4-1号楼1层 乒乓球台',
+          sceneCode: 'KJ-8yXDk9BK7NQ',
+          params:
+            '&firstView=pano:24,qua:0.0046569716799469505,0.9813820813814765,0.19050458281639018,-0.023990332947140786',
+        },
+        {
+          label: '4-1号楼1层 射箭区',
+          sceneCode: 'KJ-8yXDk9BK7NQ',
+          params:
+            '&firstView=pano:20,qua:-0.10227912194755563,0.8139137901708958,0.15090610701275087,0.5516435960690454',
+        },
+        {
+          label: '4-1号楼 娱乐休息区',
+          sceneCode: 'KJ-8yXDk9BK7NQ',
+          params:
+            '&firstView=pano:172,qua:-0.026285491500693498,-0.5010156996060221,-0.01522646481097273,0.8649049092888258',
+        },
+        {
+          label: '4-2号楼 VIP洽谈室',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:20,qua:-0.030210656596747626,0.7273994644789756,0.0320900949269009,0.6847974608518024',
+        },
+        {
+          label: '4-2号楼 休息区',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:56,qua:-0.0008089044739337793,-0.5144104029525004,-0.0004852334801243485,0.8575436151578546',
+        },
+        {
+          label: '4-2号楼 护士站',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:44,qua:-0.07980318002624788,-0.00979912811085812,-0.0007845418098985508,0.9967621598909656',
+        },
+        {
+          label: '4-2号楼 医疗部',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:66,qua:-0.04209952871323408,-0.0035019789053245386,-0.00014756338577590622,0.9991072752855208',
+        },
+        {
+          label: '4-2号楼 房务部、超市',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:74,qua:-0.000042130492863588265,0.9999250741545762,0.01169955473490148,0.0036007640279056207',
+        },
+        {
+          label: '4-2号楼 餐厅',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:76,qua:0.0003101107253231401,0.9971451465048626,0.07539654778114177,-0.00410132025091101',
+        },
+        {
+          label: '4-2号楼 多功能厅',
+          sceneCode: 'KJ-WklncxbyqUz',
+          params:
+            '&firstView=pano:226,qua:-0.0010279439479733514,0.9982114010524721,0.05699884137526075,0.018002213102936385',
+        },
+      ],
     },
     {
-      label: '光大4-2号楼-6F',
-      sceneCode: 'KJ-483Cb7j9OD0',
-    },
-    {
-      label: '光大5号楼-前台大厅',
-      sceneCode: 'KJ-YNQbf4hmdhp',
+      label: '楼层展示',
+      children: [
+        {
+          label: '光大4-1号楼-1F',
+          sceneCode: 'KJ-8yXDk9BK7NQ',
+          params:
+            '&firstView=pano:0,qua:-0.051828815102206244,-0.7091317714942,-0.05241417246055152,0.7012122683525472',
+        },
+        {
+          label: '光大4-1号楼-3F',
+          sceneCode: 'KJ-InMhgveLjSN',
+          params:
+            '&firstView=pano:2,qua:-0.001494510580635004,-0.6510945728407702,-0.0012820492666803882,0.7589940539227341',
+        },
+        {
+          label: '光大4-1号楼-4F',
+          sceneCode: 'KJ-Z3umjaDYj54',
+          params:
+            '&firstView=pano:0,qua:-0.012301715416710919,-0.6115701308322424,-0.009510753152011622,0.7910374155693033',
+        },
+        {
+          label: '光大4-1号楼-5F',
+          sceneCode: 'KJ-KWa3ofq5VtT',
+          params:
+            '&firstView=pano:0,qua:-0.03412505300824889,-0.6568498626985018,-0.02978109785591667,0.7526598396081043',
+        },
+        {
+          label: '光大4-1号楼-6F',
+          sceneCode: 'KJ-f3lOsooRQEL',
+          params:
+            '&firstView=pano:0,qua:-0.015325249200611228,-0.608161903992223,-0.01174456833630179,0.7935781673982758',
+        },
+        {
+          label: '光大4-2号楼-2F',
+          sceneCode: 'KJ-mK2fUzsBliv',
+          params:
+            '&firstView=pano:0,qua:-0.01749725260433772,-0.645792691843274,-0.014806159434117765,0.7631686765026857',
+        },
+        {
+          label: '光大4-2号楼-3F',
+          sceneCode: 'KJ-HuSSF9cJYpY',
+          params:
+            '&firstView=pano:0,qua:-0.045996339936217254,-0.6457122165537932,-0.039018126783055745,0.7611948828365402',
+        },
+        {
+          label: '光大4-2号楼-4F',
+          sceneCode: 'KJ-SfNcYJffCof',
+          params:
+            '&firstView=pano:136,qua:-0.04730401416249904,-0.6225940589150876,-0.03774820655556335,0.7802012747957571',
+        },
+        {
+          label: '光大4-2号楼-5F',
+          sceneCode: 'KJ-nOTU5Eg4Y0Y',
+          params:
+            '&firstView=pano:0,qua:-0.07287642059864806,-0.562579624926581,-0.049876072914877195,0.8220131275736767',
+        },
+        {
+          label: '光大4-2号楼-6F',
+          sceneCode: 'KJ-483Cb7j9OD0',
+          params:
+            '&firstView=pano:0,qua:-0.06459332775841535,-0.7106008781108282,-0.0658040120504373,0.6975270230111492',
+        },
+      ],
     },
   ];
+  const isMobile = ref(false);
+
+  watch(
+    () => props.isInit,
+    (v) => {
+      if (v) {
+        isMobile.value = window.browser.isMobile();
+      }
+    }
+  );
 
-  const changeScene = (code: string) => {
-    location.href = `${location.origin}${location.pathname}?m=${code}`;
+  const changeScene = (code: string, params?: string) => {
+    location.href = `${location.origin}${location.pathname}?m=${code}${params ? params : ''}`;
   };
 </script>
 
@@ -194,4 +392,62 @@
       }
     }
   }
+
+  .scene-list-subitem-popup {
+    padding: 0;
+  }
+
+  .scene-sublist-item {
+    height: 36px;
+  }
+
+  .scene-title-collapse {
+    --el-border-color-lighter: rgba(0, 0, 0, 0.2);
+    --el-collapse-header-height: 40px;
+    --el-collapse-header-bg-color: transparent;
+    --el-collapse-header-text-color: white;
+    --el-collapse-content-bg-color: transparent;
+    --el-collapse-content-font-size: 12px;
+    --el-collapse-content-text-color: white;
+
+    .el-collapse-item {
+      width: 205px;
+
+      &__header {
+        > .el-icon {
+          display: none;
+        }
+        &.is-active {
+          .scene-title-collapse-item {
+            background: rgba(203, 25, 29, 0.5);
+
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 0;
+              width: 35px;
+              height: 35px;
+              background: url('@/assets/images/zgrs/title-right.png') no-repeat center / contain;
+              transform: translateY(-50%) rotate(-90deg);
+            }
+          }
+        }
+      }
+    }
+    &-item {
+      position: relative;
+      width: 100%;
+      color: inherit;
+      font-size: inherit;
+      font-weight: bold;
+      text-align: center;
+    }
+    .scene-sublist-item {
+      justify-content: center;
+    }
+    .el-collapse-item__content {
+      padding-bottom: 0;
+    }
+  }
 </style>

src/views/home/index.zgrs.tsx

@@ -67,7 +67,8 @@ export default defineComponent({
 
           <div id="gui" style="display: none;">
             {/* 标题 */}
-            <Title />
+            {/* @ts-ignore */}
+            <Title isInit={this.manageJsLoaded} />
 
             {/* 底部菜单 */}
             <Menu />