update:更新

src/components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue

 <template>
-    <div :class="{'app-field-image-dynamic':true,[`${cssClass}`]:cssClass?true:false}">
-        <img :style="cssStyle" :src="imgUrl" />
+    <div :class="['app-field-image-dynamic', model.sysCss]" :style="containerStyle">
+        <img :style="model.sysCss" :src="imgUrl" />
     </div>
 </template>
 <script lang = 'ts'>
 import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
 import { ImgurlBase64 } from '@/utils';
 import { Environment } from "@/environments/environment";
+import { PanelFieldModel } from '@/model/panel-detail';
 @Component({})
 export default class AppFieldImageDynamic extends Vue {
 
@@ -14,57 +15,60 @@ export default class AppFieldImageDynamic extends Vue {
      * 输入值
      *
      * @type {string}
-     * @memberof AppRawItemImage
+     * @memberof AppFieldImageDynamic
      */
     @Prop() public value: any;
 
     /**
-     * 样式
+     * 模型
      *
-     * @type {string}
-     * @memberof AppRawItemImage
-     */
-    @Prop() public cssStyle?: string;
-
-    /**
-     * 样式表类名
-     *
-     * @type {string}
-     * @memberof AppRawItemImage
+     * @type {*}
+     * @memberof AppFieldImageDynamic
      */
-     @Prop({default:''}) public cssClass?: string;
+    @Prop() public model!: PanelFieldModel;
 
     /**
      * 动态图片路径
      *
-     * @memberof AppPresetRawitem
+     * @memberof AppFieldImageDynamic
      */
     protected dynaImgUrl: string = '';
 
     /**
     * 下载文件路径
     *
-    * @memberof AppPresetRawitem
+    * @memberof AppFieldImageDynamic
     */
     public downloadUrl = Environment.ExportFile;
 
+    /**
+     * 容器样式
+     *
+     * @type {any}
+     * @memberof AppFieldImageDynamic
+     */
+    public containerStyle: any = null;
+
     /**
      * 图片路径
      *
-     * @memberof AppPresetRawitem
+     * @memberof AppFieldImageDynamic
      */
     get imgUrl(): string {
         return this.dynaImgUrl;
     }
 
     created() {
+        if (this.model) {
+            this.containerStyle = this.model.getElementStyle();
+        }
         this.handleDynaImg();
     }
 
     /**
     * 处理动态图片
     *
-    * @memberof AppPresetRawitem
+    * @memberof AppFieldImageDynamic
     */
     protected handleDynaImg() {
         if (this.value && typeof this.value == "string") {

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

 <template>
-    <div class="app-rawitem-carousel">       
+    <div :class="['app-rawitem-carousel',model.sysCss]" :style="containerStyle" >       
         <el-carousel class="carsouel-container" 
             height="150px" 
             indicator-position="outside" 
@@ -16,6 +16,7 @@
     </div>
 </template>
 <script lang='ts'>
+import { PanelFieldModel } from '@/model/panel-detail';
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 @Component({})
 export default class AppCarousel extends Vue {
@@ -23,7 +24,7 @@ export default class AppCarousel extends Vue {
      * 父项所有数据
      *
      * @type {*}
-     * @memberof AppPresetCarousel
+     * @memberof AppCarousel
      */
     @Prop() public data?: any;
 
@@ -35,18 +36,12 @@ export default class AppCarousel extends Vue {
     @Prop() public value?: any;
 
     /**
-     * @description 轮播图样式
-     * @param {*}
+     * 模型
+     *
+     * @type {*}
      * @memberof AppCarousel
      */
-    @Prop() public cssStyle?: any;
-
-    /**
- * @description 样式表
- * @param {*}
- * @memberof AppCarousel
- */
-    @Prop() public cssClass?: any;
+    @Prop() public model!: PanelFieldModel;
 
     /**
      * 名称
@@ -77,6 +72,14 @@ export default class AppCarousel extends Vue {
      */
     public swipeConfig: any = {};
 
+    /**
+     * 容器样式
+     *
+     * @type {any}
+     * @memberof AppCarousel
+     */
+     public containerStyle: any = null;
+
     /**
      * data值变化
      *
@@ -87,7 +90,7 @@ export default class AppCarousel extends Vue {
     @Watch('value', { immediate: true, deep: true })
     public onDataChange(newVal: any, oldVal: any) {
         if (newVal) {
-            // this.handleSwipData(newVal);
+            this.handleSwipData(newVal);
         }
     }
 
@@ -96,6 +99,9 @@ export default class AppCarousel extends Vue {
      * @memberof AppCarousel
      */
     created() {
+        if (this.model) {
+            this.containerStyle = this.model.getElementStyle();
+        }
         //处理轮播图-动态数据
         if (this.type === "FIELD_CAROUSEL") {
             if (this.value && typeof this.value === 'string') {

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

 <template>
-    <div class='app-rawitem-image'>
-        <img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
-        <i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
+    <div :class="['app-rawitem-image', model.sysCss]" :style="containerStyle">
+        <img v-if="imgUrl" :src="imgUrl" />
+        <i v-else :class="imageClass ? imageClass : ''"></i>
     </div>
 </template>
 <script lang = 'ts'>
+import { PanelFieldModel } from '@/model/panel-detail';
 import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
 @Component({})
 export default class AppRawItemImage extends Vue {
-    
+
     /**
-     * 样式
+     * 模型
      *
-     * @type {string}
+     * @type {*}
      * @memberof AppRawItemImage
      */
-    @Prop() public cssStyle: any;
+    @Prop() public model!: PanelFieldModel;
 
     /**
-     * 样式表
+     * 图片地址
      *
      * @type {string}
      * @memberof AppRawItemImage
      */
-     @Prop() public cssClass: any;
+    @Prop() public imgUrl?: string;
 
     /**
-     * 图片地址
+     * 图标
      *
      * @type {string}
      * @memberof AppRawItemImage
      */
-    @Prop() public imgUrl?:string;
+    @Prop() public imageClass?: string;
 
     /**
-     * 图标
+     * 容器样式
      *
-     * @type {string}
+     * @type {any}
      * @memberof AppRawItemImage
      */
-    @Prop() public imageClass?:string;
-    
+    public containerStyle: any = null;
+
+    created() {
+        if (this.model) {
+            this.containerStyle = this.model.getElementStyle();
+        }
+    }
+
 }
 </script>
 <style lang = "less">

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

@@ -10,19 +10,41 @@
 </template>
 
 <script lang="ts">
+import { PanelFieldModel } from '@/model/panel-detail';
 import { Util } from '@/utils';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 @Component({})
-export default class AppVideo extends Vue {
+export default class AppRawItemVideo extends Vue {
+
+    /**
+     * 视频播放数据
+     * @memberof AppRawItemVideo
+     */
+    @Prop() public videoParmas?: any;
+
+    /**
+     * 模型
+     *
+     * @type {*}
+     * @memberof @memberof AppRawItemVideo
+     */
+    @Prop() public model!: PanelFieldModel;
+
     /**
      * 播放器唯一标识
+     * @memberof AppRawItemVideo
      */
     public uuid: string = Util.createUUID();
 
     /**
-     * 视频播放数据
+     * 容器样式
+     *
+     * @type {any}
+     * @memberof AppRawItemVideo
      */
-    @Prop() public videoParmas?: any;
+    public containerStyle: any = null;
+
+
 
     //视频播放参数
     public playerParams = {
@@ -39,6 +61,7 @@ export default class AppVideo extends Vue {
 
     /**
      * 生命周期
+     * @memberof AppRawItemVideo
      */
     public mounted() {
         this.handleStaticVideo();
@@ -47,15 +70,15 @@ export default class AppVideo extends Vue {
     /**
      * 处理静态视频播放
      *
-     * @memberof AppPresetRawitem
+     * @memberof AppRawItemVideo
      */
     protected handleStaticVideo() {
         if (this.videoParmas && this.videoParmas.length > 0) {
-            const rawParams:any = {};
+            const rawParams: any = {};
             this.videoParmas.forEach((param: any) => {
                 rawParams[param.key] = param.value;
             })
-            Object.assign(this.playerParams,rawParams);
+            Object.assign(this.playerParams, rawParams);
         }
     }
 }