update：更新

src/components/layout-element/container/app-scroll-container/app-scroll-container.vue

@@ -84,7 +84,7 @@ export default class AppScrollContainer extends Vue {
      */
     get curStyle(){
         const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getBoxSpacingStyle();
+        return layoutModel.getElementStyle();
     }
 
     /**

src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue

@@ -72,7 +72,7 @@ export default class AppSimpleFlexContainer extends Vue {
      */
     get curStyle() {
         const layoutModel = this.layoutModelDetails[this.name];
-        return layoutModel.getBoxSpacingStyle();
+        return layoutModel.getElementStyle();
     }
 
     /**

src/components/layout-element/container/app-standard-container/app-standard-container.less

+// 标准容器大小靠内容撑
 .app-standard-container{
     display: block;
+    .container-item__pos{
+        width: 100%;
+        height: 100%;
+    }
 }
\ No newline at end of file

src/components/layout-element/container/app-standard-container/app-standard-container.vue

 <template>
-    <div :class="curClassName" :style="curStyleContent">
+    <div :class="curClassName" :style="curStyle">
         <template v-if="containerModel.length > 0">
-            <template v-for="name of containerModel">
+            <div v-for="name of containerModel" class="container-item__pos" :style="getItemPosStyle(name)">
                 <slot :name="name"></slot>
-            </template>
+            </div>
         </template>
     </div>
 </template>
@@ -63,17 +63,24 @@ export default class AppStandardContainer extends Vue {
     * 当前容器样式类
     */
     get curClassName() {
-        return `app-standard-container ${this.name}`;
+        const layoutModel = this.layoutModelDetails[this.name];
+        return `app-standard-container ${this.name} ${layoutModel.sysCss}`;
     }
 
     /**
-    * 当前容器样式
-    */
-    get curStyleContent() {
-        let boxLayoutPosStyle = "";
-        const curLayoutModel = this.layoutModelDetails[this.name];
-        console.log(curLayoutModel);
-        return boxLayoutPosStyle;
+     * 当前容器样式
+     */
+    get curStyle() {
+        const layoutModel = this.layoutModelDetails[this.name];
+        return layoutModel.getElementStyle();
+    }
+
+    /**
+     * 获取项布局样式
+     */
+    public getItemPosStyle(name: string) {
+        const layoutModel = this.layoutModelDetails[name];
+        return layoutModel.getCommonLayoutStyle();
     }
 }
 </script>

src/model/panel-detail/panel-container.ts

@@ -15,7 +15,7 @@ export class PanelContainerModel extends PanelDetailModel {
      * @type {string[]}
      * @memberof PanelContainerModel
      */
-    public details:string[] = [];
+    public details: string[] = [];
 
     /**
      * 标题关闭模式
@@ -23,7 +23,15 @@ export class PanelContainerModel extends PanelDetailModel {
      * @type {number}
      * @memberof PanelContainerModel
      */
-    public titleBarCloseMode:number = 0;
+    public titleBarCloseMode: number = 0;
+
+    /**
+     * 背景图片
+     *
+     * @type {*}
+     * @memberof PanelContainerModel
+     */
+    public sysImage: any = {};
 
     /**
      * Creates an instance of PanelContainerModel.
@@ -34,6 +42,45 @@ export class PanelContainerModel extends PanelDetailModel {
         super(opts);
         this.details = opts.details;
         this.titleBarCloseMode = opts.titleBarCloseMode;
+        this.sysImage = opts.sysImage;
+    }
+
+    /**
+     * 获取容器元素样式(仅限容器元素)
+     *
+     * @return {*} 
+     * @memberof PanelContainerModel
+     */
+    public getElementStyle() {
+        const containerStyle = {};
+        Object.assign(containerStyle, this.getFlexStyle());
+        //边缘布局容器盒子大小由布局组件内部计算
+        if (this.layout !== "BORDER") {
+            Object.assign(containerStyle, this.getBoxSizeStyle());
+        }
+        Object.assign(containerStyle, this.getBoxSpacingStyle());
+        Object.assign(containerStyle, this.getSpecificStyle());
+        return containerStyle;
+    }
+
+    /**
+     * 获取容器特有样式（主要包含背景图片）
+     *
+     * @protected
+     * @memberof PanelContainerModel
+     */
+    protected getSpecificStyle() {
+        const boxStyle = {};
+        if (Object.is(this.itemStyle, 'STYLE2') && this.sysImage && (this.sysImage.imagePath || this.sysImage.rawContent)) {
+            Object.assign(boxStyle, { background: `url('${this.sysImage.imagePath || this.sysImage.rawContent}') no-repeat 0px 0px`, 'background-size': '100% 100%' });
+            if (!this.layoutWidth) {
+                Object.assign(boxStyle, { width: '100%' });
+            }
+            if (!this.layoutHeight) {
+                Object.assign(boxStyle, { height: '100%' });
+            }
+        }
+        return boxStyle;
     }
 
 

src/model/panel-detail/panel-detail.ts

@@ -24,6 +24,14 @@ export class PanelDetailModel {
      */
     public itemType: string = '';
 
+    /**
+     * 成员样式
+     *
+     * @type {string}
+     * @memberof PanelDetailModel
+     */
+    public itemStyle: string = '';
+
     /**
      * 面板对象
      *
@@ -214,10 +222,11 @@ export class PanelDetailModel {
         this.isShowCaption = opts.isShowCaption;
         this.sysCss = opts.sysCss;
         this.predefinedType = opts.predefinedType;
+        this.itemStyle = opts.itemStyle;
     }
 
     /**
-     * 获取元素样式（元素，包含内容盒子 大小/边距/内容 的样式）
+     * 获取元素样式（除容器之外的元素，包含内容盒子 大小/边距/内容 的样式）
      *
      * @memberof PanelDetailModel
      */
@@ -234,7 +243,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxSpacingStyle() {
+    protected getBoxSpacingStyle() {
         const boxStyle = {};
         // 上方间隔模式
         if (this.spacingTop) {
@@ -255,12 +264,35 @@ export class PanelDetailModel {
         return boxStyle;
     }
 
+    /**
+     * 识别flex布局方向，横轴对齐，纵轴对齐（元素）
+     *
+     * @return {*} 
+     * @memberof PanelDetailModel
+     */
+    protected getFlexStyle() {
+        const boxStyle = {};
+        if (this.flexParams.align || this.flexParams.dir || this.flexParams.vAlign) {
+            Object.assign(boxStyle, { 'display': 'flex' });
+            if (this.flexParams.dir) {
+                Object.assign(boxStyle, { 'flex-direction': this.flexParams.dir });
+            }
+            if (this.flexParams.align) {
+                Object.assign(boxStyle, { 'justify-content': this.flexParams.align });
+            }
+            if (this.flexParams.vAlign) {
+                Object.assign(boxStyle, { 'align-items': this.flexParams.vAlign });
+            }
+        }
+        return boxStyle;
+    }
+
     /**
      * 获取盒子大小样式（元素）
      *
      * @memberof PanelDetailModel
      */
-    public getBoxSizeStyle() {
+    protected getBoxSizeStyle() {
         const boxStyle = {};
         if (this.widthMode || this.layoutWidth) {
             Object.assign(boxStyle, Util.getBoxSize("WIDTH", this.widthMode, this.layoutWidth));
@@ -276,7 +308,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxContentStyle() {
+    protected getBoxContentStyle() {
         const boxStyle = {};
         return boxStyle;
     }
@@ -286,7 +318,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxBorderStyle() {
+    protected getBoxBorderStyle() {
         const boxStyle = {};
         return boxStyle;
     }
@@ -297,7 +329,7 @@ export class PanelDetailModel {
      * @return {*} 
      * @memberof PanelDetailModel
      */
-     public getCommonLayoutStyle() {
+    public getCommonLayoutStyle() {
         const layoutStyle = {};
         Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
         Object.assign(layoutStyle, this.getBoxLayOutStyle());
@@ -324,7 +356,7 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxSelfAlignStyle() {
+    protected getBoxSelfAlignStyle() {
         const boxStyle = {};
         // 自身对齐方式
         if (this.vAlignSelf || this.hAlignSelf) {
@@ -369,25 +401,12 @@ export class PanelDetailModel {
      *
      * @memberof PanelDetailModel
      */
-    public getBoxLayOutStyle() {
+    protected getBoxLayOutStyle() {
         const boxStyle = {};
         // 识别FLEX
         if (this.layout == 'FLEX') {
             Object.assign(boxStyle, { 'display': 'flex', 'flex-grow': this.flexGrow ? this.flexGrow : 0 });
         }
-        // 识别flex布局方向，横轴对齐，纵轴对齐
-        if (this.flexParams.align || this.flexParams.dir || this.flexParams.vAlign) {
-            Object.assign(boxStyle, { 'display': 'flex' });
-            if (this.flexParams.dir) {
-                Object.assign(boxStyle, { 'flex-direction': this.flexParams.dir });
-            }
-            if (this.flexParams.align) {
-                Object.assign(boxStyle, { 'justify-content': this.flexParams.align });
-            }
-            if (this.flexParams.vAlign) {
-                Object.assign(boxStyle, { 'align-items': this.flexParams.vAlign });
-            }
-        }
         // 识别SIMPLEFLEX
         if (this.layout == 'SIMPLEFLEX') {
             if (this.flexGrow) {