update:更新

src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.less

+.app-rawitem-carousel{
+    width: 100%;
+    height: 200px;
+    .carsouel-container{
+        width: 100%;
+        height: 100%;
+    }
+}
\ No newline at end of file

src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue

 <template>
-    <div class="app-carouse">
-        <Carousel :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" radius-dot>
+    <div class="app-rawitem-carousel">
+        <Carousel class="carsouel-container" :autoplay="swipeConfig.isAuto" :autoplay-speed="swipeConfig.timeSpan" radius-dot>
             <CarouselItem v-for="(item, index) in swipeData" :key="index">
                 <div class="carousel-img-item">
                     <a v-if="item.linkPath" :href="item.linkPath">
@@ -26,7 +26,7 @@ export default class AppCarousel extends Vue {
     @Prop() public data?: any;
 
     /**
-     * @description 轮播图数据
+     * @description 轮播图样式
      * @param {*}
      * @memberof AppCarousel
      */
@@ -52,11 +52,10 @@ export default class AppCarousel extends Vue {
      * @param {*} oldVal
      * @memberof AppCarousel
      */
-    @Watch('data', { immediate: true })
+    @Watch('data', { immediate: true, deep: true })
     public onDataChange(newVal: any, oldVal: any) {
-        if (!Object.is(newVal, oldVal)) {
-            this.swipeData = newVal.swipeData;
-            this.swipeConfig = newVal.swipeConfig;
+        if (newVal) {
+            this.handleSwipData(newVal);
         }
     }
 
@@ -65,8 +64,51 @@ export default class AppCarousel extends Vue {
      * @memberof AppCarousel
      */
     created() {
-        this.swipeData = this.data.swipeData;
-        this.swipeConfig = this.data.swipeConfig;
+        this.handleSwipData(this.data);
+    }
+
+     /**
+     * @description 处理轮播图数据
+     * @memberof AppCarousel
+     */
+    private handleSwipData(data: any) {
+        if (data && data.length > 0) {
+            const configItem = data.findIndex((item: any) =>
+                Object.is(item.key, "autoplay")
+            );
+            if (configItem > -1) {
+                // 有配置参数就截掉配置参数
+                this.swipeData = data.slice(0, -2);
+                this.swipeConfig = this.setSwipeConfig(data.slice(-2));
+            } else {
+                this.swipeData = this.data;
+                this.swipeConfig = this.setSwipeConfig(data);
+            }
+        }
+    }
+
+    /**
+     * @description 设置轮播图配置
+     * @param {*}
+     * @memberof AppRawItem
+     */
+    private setSwipeConfig(data: any) {
+        const autoPlay: any =
+            data.find((item: any) => Object.is(item.key, "autoplay")) || {};
+        const timeSpan: any =
+            data.find((item: any) => Object.is(item.key, "timespan")) || {};
+        let isauto = false;
+        let timespan = 0;
+        if (autoPlay.value && Object.is(autoPlay.value, "1")) {
+            isauto = true;
+        }
+        if (timeSpan.value) {
+            timespan = Number(timeSpan.value);
+        }
+        return {
+            isAuto: isauto,
+            timeSpan: timespan,
+        };
     }
 
     /**

src/components/layout-element/media/app-rawitem-image/app-rawitem-image.less

@@ -4,7 +4,8 @@
   >img{
     width: auto;
     height: 100%;
+    max-width: 100%;
+    height: 360px;
     object-fit: contain;    
-    
   }
 }
\ No newline at end of file

src/components/layout-element/media/app-rawitem-video/app-rawitem-video.less

+.app-rawitem-video{
+    width: 600px;
+    height: auto;
+    max-width: 100%;    
+    min-height: 300px;
+    border: 1px solid gray;
+    >video{
+        width: 100%;
+        height: 100%;
+    }
+}
\ No newline at end of file

src/components/layout-element/media/app-rawitem-video/app-rawitem-video.vue

 <template>
-    <div :id="uuid" class="render-video"></div>
+    <div class="app-rawitem-video">
+        <video 
+            :src="playerParams.url" 
+            :autoplay="playerParams.autoplay" 
+            :controls="playerParams.controls" 
+            :loop="playerParams.loop" 
+            :muted="playerParams.volume">
+        </video>
+    </div>
 </template>
 
 <script lang="ts">
-// import Player from 'xgplayer';
 import { Util } from '@/utils';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 @Component({})
@@ -18,35 +25,29 @@ export default class AppVideo extends Vue {
      */
     @Prop() public videoParmas?: any;
 
-    get Params() {
-        return this.videoParmas ? this.videoParmas : {};
-    }
+    //视频播放参数
+    public playerParams = {
+        id: this.uuid,
+        height: '100%',
+        width: '100%',
+        url:"https://kvideo01.youju.sohu.com/16403c4c-378c-4415-b3ef-908e87efb0082_0_0.mp4",
+        volume:0.8,
+        autoplay:false,
+        loop:false,
+        controls:false
+    };    
 
     /**
      * 生命周期
      */
     public mounted() {
-        let defaultHeight = 337.5;
-        let defaultwidth = 600;
-        if (this.$el) {
-            defaultHeight = this.$el.clientHeight;
-            defaultwidth = this.$el.clientWidth;
+        if (this.videoParmas) {
+            this.playerParams.url = this.videoParmas.path;
+            this.playerParams.volume = this.videoParmas.mute ? 0 : 0.8;
+            this.playerParams.autoplay = this.videoParmas.autoplay ? true : false;
+            this.playerParams.loop = this.videoParmas.replay ? true : false;
+            this.playerParams.controls = this.videoParmas.showcontrols ? true : false
         }
-        // let player = new Player({
-        //     id: this.uuid,
-        //     fluid: true,
-        //     height: defaultHeight,
-        //     width: defaultwidth,
-        // });
-        // if (this.videoParmas) {
-        //     player.trl = this.videoParmas.path;
-        // }
-        // if (this.Params) {
-        //     player.volume = this.Params.mute ? 0 : 0.8;
-        //     player.autoplay = this.Params.autoplay ? true : false;
-        //     player.loop = this.Params.replay ? true : false;
-        //     player.controls = this.Params.showcontrols ? true : false
-        // }
     }
 }
 </script>