首页chart图分隔样式

frontend/saas-web/app/Application.scss

@@ -491,4 +491,69 @@ div::-webkit-scrollbar-track {
   & > div > div > div.x-box-inner.x-box-scroller-body-vertical.x-scroller > div > div > a > span {
     margin-left: 28px;
   }
+}
+
+/** responsivecolumn **/
+.x-responsivecolumn {
+  padding: 0;
+
+  & > * {
+      margin: 0;
+
+  }
+}
+
+// @mixin responsivecolumn-item($width: 100%) {
+//   width: #{$width};
+// }
+
+.big-100 {
+  // width: 100%;
+  @include responsivecolumn-item(100%);
+}
+
+.big-60 {
+  // width: 60%;
+  @include responsivecolumn-item(60%);
+}
+
+.big-50 {
+  float: left;
+  // width: 50%;
+  @include responsivecolumn-item(50%);
+}
+
+.big-40 {
+  float: left;
+  // width: 40%;
+  @include responsivecolumn-item(40%);
+}
+
+.big-33 {
+  float: left;
+  // width: 33.33%;
+  @include responsivecolumn-item(33.33%);
+}
+
+.big-20 {
+  float: left;
+  // width: 20%;
+  @include responsivecolumn-item(20%);
+}
+
+//--------------------------------------------------------
+// And classes for small-size responsive items
+
+.x-responsivecolumn-small {
+   > .small-100 {
+      float: left;
+      // width: 100%;
+      @include responsivecolumn-item(100%);
+   }
+
+   > .small-50 {
+      float: left;
+      // width: 50%;
+      @include responsivecolumn-item(50%);
+   }
 }

frontend/saas-web/app/view/home/Home.js

@@ -4,9 +4,6 @@ Ext.define('saas.view.home.Home', {
     id: 'home',
 
     requires: [
-        'Ext.slider.Single',
-        'Ext.form.field.Display',
-        'Ext.layout.container.Border',
         'Ext.ux.layout.ResponsiveColumn'
     ],
 
@@ -37,41 +34,45 @@ Ext.define('saas.view.home.Home', {
     }, {
         xtype: 'panel',
         style: {
-            marginRight: '0',
+            background: '#EEF4F9',
         },
-        // title: '2018年11月经营分析',
+
         latyout: 'responsivecolumn',
         defaults: {
-            margin: '0 0 0 14',
-            userCls: 'big-33 small-50',
+            margin: '0 16 0 0',
+            userCls: 'x-home-chart big-33 small-50',
         },
         items: [{
             xtype: 'month-sale',
+            padding: '0 0 0 14',
         }, {
             xtype: 'month-purchase',
+            padding: '0 0 0 14',
         }, {
             xtype: 'key-data',
+            margin: 0,
+            padding: '0 14 0 14',
         }]
     }, {
         xtype: 'panel',
-        // title: '2018年11月经营分析',
         latyout: 'responsivecolumn',
         style: {
-            marginRight: '0',
-            marginBottom: '0'
+            background: '#EEF4F9',
         },
         defaults: {
-            margin: '0 0 0 14',
-            userCls: 'big-33 small-50',
+            margin: '0 16 0 0',
+            userCls: 'x-home-chart big-33 small-50',
         },
         items: [{
             xtype: 'month-io',
+            padding: '0 0 0 14',
         }, {
             xtype: 'sale-trend',
+            padding: '0 0 0 14',
         }, {
-        //     xtype: 'purchase-trend'
-        // }, {
-            xtype: 'stock-amount'
+            xtype: 'stock-amount',
+            margin: 0,
+            padding: '0 14 0 14',
         }]
     }],
 

frontend/saas-web/app/view/home/Home.scss

@@ -92,9 +92,11 @@ $unaudit-purc-container-color: dynamic(#e91e63);
 }
 
 .x-home-panel {
+    background: #EEF4F9;
 
     &> .x-autocontainer-outerCt {
         display: block;
+        background: #EEF4F9;
 
         &> .x-autocontainer-innerCt {
             display: block;
@@ -104,6 +106,25 @@ $unaudit-purc-container-color: dynamic(#e91e63);
 
 .x-home-box {
     border-radius: 2px;
+    margin: 0 0 16px 0 !important;
+    
+
+    &:last-child {
+        margin: 0 !important;
+    }
+
+    & > .x-panel-bodyWrap > .x-panel-body >.x-autocontainer-outerCt > .x-autocontainer-innerCt {
+        background: #EEF4F9;
+        display: flex;
+        justify-content: space-around;
+
+        .x-home-chart {
+            background: #fff;
+            border-radius: 4px;
+        }
+    }
+
+    
 
     &>.x-panel-header {
         background-color: #fff;
@@ -143,59 +164,5 @@ $unaudit-purc-container-color: dynamic(#e91e63);
             color: #485465;
         }
     }
-}
-
-.x-responsivecolumn {
-    padding: 0;
-}
-
-.big-100 {
-    // width: 100%;
-    @include responsivecolumn-item(100%);
-}
-
-.big-60 {
-    // width: 60%;
-    @include responsivecolumn-item(60%);
-}
-
-.big-50 {
-    float: left;
-    // width: 50%;
-    @include responsivecolumn-item(50%);
-}
-
-.big-40 {
-    float: left;
-    // width: 40%;
-    @include responsivecolumn-item(40%);
-}
-
-.big-33 {
-    float: left;
-    // width: 33.33%;
-    @include responsivecolumn-item(33.33%);
-}
-
-.big-20 {
-    float: left;
-    // width: 20%;
-    @include responsivecolumn-item(20%);
-}
 
-//--------------------------------------------------------
-// And classes for small-size responsive items
-
- .x-responsivecolumn-small {
-     > .small-100 {
-        float: left;
-        // width: 100%;
-        @include responsivecolumn-item(100%);
-     }
-
-     > .small-50 {
-        float: left;
-        // width: 50%;
-        @include responsivecolumn-item(50%);
-     }
 }

frontend/saas-web/app/view/home/HomeModel.js

@@ -202,42 +202,42 @@ Ext.define('saas.view.home.HomeModel', {
             } 
         },
 
-        purchase_trend: {
-            fields: ['x', 'y'],
-            autoLoad: true,
-            proxy: {
-                type: 'ajax',
-                // url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=true',
-                url: '/api/commons/homePage/purchaseData?sixMonths=true',
-                timeout: 8000,
-                actionMethods: {
-                    read: 'GET'
-                },
-                reader: {
-                    type: 'json',
-                    rootProperty: 'data',
-                },
-                listeners: {
-                    exception: function(proxy, response, operation, eOpts) {
-                        var p = Ext.getCmp('purchase_trend');
-                        p && p.setLoading(false);
-                    }
-                }
-            },
-            sorters: [
-                { property: 'x', direction: 'ASC' }
-            ],
-            listeners: {
-                beforeload: function() {
-                    var p = Ext.getCmp('purchase_trend');
-                        p && p.setLoading(true);
-                },
-                load: function(s, d) {
-                    var p = Ext.getCmp('purchase_trend');
-                        p && p.setLoading(false);
-                }
-            } 
-        },
+        // purchase_trend: {
+        //     fields: ['x', 'y'],
+        //     autoLoad: true,
+        //     proxy: {
+        //         type: 'ajax',
+        //         // url: 'http://192.168.253.58:8920/homePage/purchaseData?sixMonths=true',
+        //         url: '/api/commons/homePage/purchaseData?sixMonths=true',
+        //         timeout: 8000,
+        //         actionMethods: {
+        //             read: 'GET'
+        //         },
+        //         reader: {
+        //             type: 'json',
+        //             rootProperty: 'data',
+        //         },
+        //         listeners: {
+        //             exception: function(proxy, response, operation, eOpts) {
+        //                 var p = Ext.getCmp('purchase_trend');
+        //                 p && p.setLoading(false);
+        //             }
+        //         }
+        //     },
+        //     sorters: [
+        //         { property: 'x', direction: 'ASC' }
+        //     ],
+        //     listeners: {
+        //         beforeload: function() {
+        //             var p = Ext.getCmp('purchase_trend');
+        //                 p && p.setLoading(true);
+        //         },
+        //         load: function(s, d) {
+        //             var p = Ext.getCmp('purchase_trend');
+        //                 p && p.setLoading(false);
+        //         }
+        //     } 
+        // },
 
         stock_amount: {
             fields: ['x', 'y'],

frontend/saas-web/ext/packages/ux/classic/sass/var/layout/ResponsiveColumn.scss

@@ -6,7 +6,7 @@
  * @var {number}
  * The space between items in a responsive column layout
  */
-$responsivecolumn-item-spacing: dynamic(20px);
+$responsivecolumn-item-spacing: dynamic(0px);
 
 /**
  * Configures the width of an item in a responsive column layout