gemercheung 2 years ago
parent
commit
2c120971a3

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

@@ -50,8 +50,8 @@
     width: 100;
     .image {
       flex: 0 0 33.33333%;
-      height: 130px;
-      max-width: 130px;
+      height: 120px;
+      width: 100%;
       padding: 5px;
     }
   }

+ 7 - 3
src/components/custom/introPanel/index.vue

@@ -11,7 +11,7 @@
       <div class="main">
         <tabs>
           <tab name="简介">
-            <IntroText :data="roomInfo" />
+            <IntroText :data="roomInfo" :video="roomVideo" />
           </tab>
           <tab name="相册">
             <ImageGrid :data="imageList" @click-image="handleViewer" />
@@ -38,7 +38,7 @@
   import ImageGrid from './image-grid.vue';
   import IntroText from './intro-text.vue';
   import ImageViewer from './image-view.vue';
-  import Map from './map.vue';
+  // import Map from './map.vue';
   import { useSceneStore } from '/@/store/modules/scene';
   import { useRoom } from '/@/hooks/useRoom';
 
@@ -54,6 +54,7 @@
   const currentImage = ref(0);
   const imageList = ref<string[]>([]);
   const roomInfo = ref('');
+  const roomVideo = ref('');
   watchEffect(() => {
     if (unref(showPanel)) {
       animateActive.value = true;
@@ -67,7 +68,10 @@
     if (room.value?.roomInfo) {
       console.log('roomInfo', room.value.roomInfo);
       roomInfo.value = room.value.roomInfo;
-      // imageList.value = room.value.image;
+    }
+    if (room.value?.video?.length) {
+      console.log('video', room.value.video);
+      roomVideo.value = room.value.video[0];
     }
   });
 

+ 16 - 2
src/components/custom/introPanel/intro-text.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="intro-textarea">
-    <!-- <div v-html=""></div> -->
-    {{ data }}
+    <div v-html="data"></div>
+    <div class="video-container" v-if="video">
+      <video :src="video" controls autoplay></video>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -10,6 +12,10 @@
       type: String,
       default: () => '',
     },
+    video: {
+      type: String,
+      default: () => '',
+    },
   });
 </script>
 
@@ -25,4 +31,12 @@
       word-wrap: break-word;
     }
   }
+  .video-container {
+    width: 100%;
+    min-height: 200px;
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
 </style>