园区介绍

digital-park-web/digital-park/src/views/index/park-introduce/Introduce.vue

@@ -11,10 +11,7 @@
                 :autoplay="false"
                 :height="dataList.length < 5 ? '494px' : '238px'"
             >
-                <el-carousel-item>
-                    <img :src="formatImg(JSON.parse(parkInfo.photo)[0])" alt="园区图片" />
-                </el-carousel-item>
-                <el-carousel-item v-if="this.parkInfo.video">
+                <el-carousel-item v-if="this.parkInfo.video && this.parkInfo.video.length > 0">
                     <video-player
                         class="video-player vjs-custom-skin"
                         ref="videoPlayer"
@@ -22,6 +19,9 @@
                         :options="playerOptions"
                     ></video-player>
                 </el-carousel-item>
+                <el-carousel-item v-for="(item, index) in parkInfo.photo" :key="index">
+                    <img :src="formatImg(item)" alt="园区图片" />
+                </el-carousel-item>
             </el-carousel>
         </div>
 
@@ -70,11 +70,11 @@ export default {
                 fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                 sources: [
                     {
-                        type: "video/" + JSON.parse(this.parkInfo.video)[0].split(".")[1], // 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
-                        src: this.formatVideo(JSON.parse(this.parkInfo.video)[0]), // 视频url地址
+                        type: "video/" + this.parkInfo.video[0].split(".")[1], // 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
+                        src: this.formatVideo(this.parkInfo.video[0]), // 视频url地址
                     },
                 ],
-                poster: "", // 视频封面地址
+                poster: this.formatImg(this.parkInfo.photo[0]), // 视频封面地址
                 // width: document.documentElement.clientWidth,
                 height: this.dataList.length < 5 ? 494 : 238, // 设置高度，fluid需要设置成false
                 notSupportedMessage: "此视频暂无法播放...", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。