save

src/components/basic/icon/images/index.ts

@@ -24,6 +24,8 @@ import video_off from './video_off@2x.png';
 import video_disable from './video_off_50@2x.png';
 import kick_user from './remove@2x.png';
 import assistants from './assistants@2x.png';
+import detail from './detail@2x.png';
+
 const icons = {
   arrow,
   arrows,
@@ -51,5 +53,6 @@ const icons = {
   video_disable,
   kick_user,
   assistants,
+  detail,
 };
 export { icons };

src/components/custom/introPanel/image-grid.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="image-grid">
     <div :key="index" v-for="(i, index) in data" class="image" @click="emits('clickImage', index)">
-      <div class="item" :style="{ backgroundImage: `url(${i.url})` }"></div>
+      <div class="item" :style="{ backgroundImage: `url(${i})` }"></div>
     </div>
   </div>
 </template>
@@ -9,13 +9,13 @@
   import { onMounted } from 'vue';
 
   const emits = defineEmits(['clickImage']);
-  interface ImageProps {
-    url: string;
-    id?: string;
-  }
+  // interface ImageProps {
+  //   url: string;
+  //   id?: string;
+  // }
   defineProps({
     data: {
-      type: Array as PropType<ImageProps[]>,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
   });
@@ -25,14 +25,16 @@
 
 <style lang="scss" scoped>
   .image-grid {
-    width: 100%;
+    width: 95%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    margin: 0 auto;
     .image {
-      flex: 0 0 33.33333%;
-      height: 130px;
-      padding: 5px;
+      flex: 0 0 25%;
+      height: 145px;
+      max-width: 145px;
+      padding: 8px;
       .item {
         width: 100%;
         height: 100%;
@@ -43,3 +45,14 @@
     }
   }
 </style>
+<style lang="scss">
+  [is-mobile] .image-grid {
+    width: 100;
+    .image {
+      flex: 0 0 33.33333%;
+      height: 130px;
+      max-width: 130px;
+      padding: 5px;
+    }
+  }
+</style>

src/components/custom/introPanel/image-view.vue

@@ -12,7 +12,7 @@
             <div
               :id="`vmRef_${index}`"
               class="swiper-zoom-target"
-              :style="`background-image: url(${i.url})`"
+              :style="`background-image: url(${i})`"
             ></div>
           </div>
         </div>
@@ -30,8 +30,8 @@
 
   const props = defineProps({
     data: {
-      type: Object,
-      default: {},
+      type: Array,
+      default: () => [],
     },
     current: {
       type: Number,

src/components/custom/introPanel/index.vue

@@ -2,7 +2,7 @@
   <div class="layer" v-if="showPanel">
     <div class="layer-content animated" :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'">
       <div class="layer-title">
-        <span>xxxx</span>
+        <span>{{ title }}</span>
         <i
           @click.stop="handleClose"
           class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close close-btn"
@@ -11,20 +11,20 @@
       <div class="main">
         <tabs>
           <tab name="简介">
-            <IntroText />
+            <IntroText :data="roomInfo" />
           </tab>
           <tab name="相册">
-            <ImageGrid :data="MockImageList" @click-image="handleViewer" />
+            <ImageGrid :data="imageList" @click-image="handleViewer" />
           </tab>
-          <tab name="地图">
+          <!-- <tab name="地图">
             <Map />
-          </tab>
+          </tab> -->
         </tabs>
       </div>
     </div>
     <ImageViewer
       :current="currentImage"
-      :data="MockImageList"
+      :data="imageList"
       v-if="showViewer"
       @close="showViewer = false"
     />
@@ -34,78 +34,52 @@
 <script setup lang="ts">
   import { Tabs, Tab } from 'vue3-tabs-component';
   import { useAppStore } from '/@/store/modules/app';
-  import { computed, ref, watchEffect } from 'vue';
+  import { computed, ref, watchEffect, unref, onMounted } from 'vue';
   import ImageGrid from './image-grid.vue';
   import IntroText from './intro-text.vue';
   import ImageViewer from './image-view.vue';
   import Map from './map.vue';
+  import { useSceneStore } from '/@/store/modules/scene';
+  import { useRoom } from '/@/hooks/useRoom';
 
-  import {} from 'vue';
-  import { unref } from 'vue';
-  import { onMounted } from 'vue';
   const appStore = useAppStore();
+  const sceneStore = useSceneStore();
   (window as any).appStore = appStore;
   const showPanel = computed(() => appStore.isShowIntroPanel);
+  const { room } = useRoom();
+
+  const title = computed(() => sceneStore.metadata.title);
   const animateActive = ref(false);
   const showViewer = ref(false);
   const currentImage = ref(0);
+  const imageList = ref<string[]>([]);
+  const roomInfo = ref('');
   watchEffect(() => {
     if (unref(showPanel)) {
       animateActive.value = true;
     } else {
       animateActive.value = false;
     }
+    if (room.value?.image) {
+      imageList.value = room.value.image;
+    }
+
+    if (room.value?.roomInfo) {
+      console.log('roomInfo', room.value.roomInfo);
+      roomInfo.value = room.value.roomInfo;
+      // imageList.value = room.value.image;
+    }
   });
+
   const handleViewer = (index: number) => {
     showViewer.value = true;
     currentImage.value = index;
   };
-  const MockImageList = [
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-    {
-      url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
-    },
-  ];
+
   const handleClose = () => {
     appStore.setShowIntroPanel(false);
   };
-  onMounted(() => {
-    setTimeout(() => {
-      appStore.setShowIntroPanel(true);
-    }, 5000);
-  });
+  onMounted(() => {});
 </script>
 
 <style lang="scss" scoped>
@@ -119,20 +93,25 @@
   }
   .layer {
     width: 100%;
+    height: 100%;
     position: fixed;
     bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
     z-index: 10000;
     // display: none;
     .layer-content {
-      position: absolute;
-      width: 100%;
+      position: relative;
+      width: 600px;
       font-size: 14px;
       height: calc(var(--vh) * 60);
-      bottom: 0;
       color: white;
       display: flex;
       flex-direction: column;
       z-index: 0;
+      margin: 0 auto;
+      top: 40%;
       &::before {
         content: ' ';
         background: rgba(0, 0, 0, 0.9);
@@ -164,6 +143,13 @@
   }
 </style>
 <style lang="scss">
+  [is-mobile] {
+    .layer .layer-content {
+      width: 100%;
+      left: 0;
+      transform: none;
+    }
+  }
   .tabs-component {
     width: 100%;
     min-height: 100%;

src/components/custom/introPanel/intro-text.vue

@@ -1,55 +1,14 @@
 <template>
   <div class="intro-textarea">
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
-    <p>
-      1837年，第一家蒂芙尼精品店在纽约开业；1845年，蒂芙尼发布了美国境内首份直邮目录；1866年，蒂芙尼推出美国第一款计时码表——蒂芙尼计时器；1868年，蒂芙尼开始制造黄金时尚珠宝设计；1969年，Return
-      to Tiffany™钥匙扣问世；1980年，Paloma Picasso首个蒂芙尼系列问世；2009年，Tiffany
-      Keys系列问世；2014年，Tiffany T系列作为新时代的标志而问世；
-    </p>
+    <!-- <div v-html=""></div> -->
+    {{ data }}
   </div>
 </template>
 <script setup lang="ts">
-  interface ImageProps {
-    url: string;
-  }
   defineProps({
     data: {
-      type: Array as PropType<ImageProps[]>,
-      default: () => [],
+      type: String,
+      default: () => '',
     },
   });
 </script>

src/components/custom/panel.vue

@@ -4,6 +4,9 @@
     <span class="icon" @click="handlePlayTours" v-if="hasTours && false">
       <Icon type="play" />
     </span>
+    <span class="icon" @click="handleDetail">
+      <Icon type="detail" />
+    </span>
     <span class="icon" @click="showScenes = !showScenes" v-if="sceneList.length > 1">
       <Icon type="scene" />
     </span>
@@ -28,9 +31,11 @@
   import { useRoom } from '/@/hooks/useRoom';
   import { useTourPlayer } from '/@/hooks/userTourPlayer';
   import { useSceneStore } from '/@/store/modules/scene';
+  import { useAppStore } from '/@/store/modules/app';
 
   const { initialRoom, changeScene, sceneList } = useRoom();
   const sceneStore = useSceneStore();
+  const appStore = useAppStore();
   // const hasMusic = computed(
   //   () => sceneStore.metadata.music?.length || sceneStore.metadata.musicFile?.length,
   // );
@@ -76,6 +81,13 @@
       isPlayMusic.value = false;
     }
   }
+  const handleDetail = () => {
+    if (appStore.isShowIntroPanel) {
+      appStore.setShowIntroPanel(false);
+    } else {
+      appStore.setShowIntroPanel(true);
+    }
+  };
 </script>
 
 <style lang="scss" scoped>

src/hooks/useRoom.ts

@@ -28,8 +28,12 @@ export interface SceneItemType {
   bind: boolean;
   takeLookLock: number;
   maxMan: number;
+  roomInfo: string;
   useEndTime: string;
   useStartTime: string;
+  video?: string[];
+  image?: string[];
+  head?: string;
 }
 
 export const room = ref<Nullable<roomDataType>>(null);