首页样式

frontend/saas-web/app/view/core/chart/ChartBase.js

@@ -6,7 +6,7 @@ Ext.define('saas.view.core.chart.ChartBase', {
     ],
 
     height: 300,
-    bodyPadding: 16,
+    bodyPadding: '16 16 16 0',
 
     layout: 'fit',
 

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

@@ -52,7 +52,7 @@ Ext.define('saas.view.home.Home', {
         }, {
             xtype: 'key-data',
             margin: 0,
-            padding: '0 0 0 14',
+            padding: '0 0 8 14',
         }]
     }, {
         xtype: 'panel',

frontend/saas-web/app/view/home/charts/KeyData.scss

@@ -13,13 +13,26 @@
             border-style: solid;
             border-color: #1EC09F;
             cursor: pointer;
+            transition: all 0.4s ease;
 
             &:nth-of-type(odd) {
                 margin: 8px 8px 8px 0;
+
+                &:hover {
+                    position: relative;
+                    margin: 2px 8px 14px 0;
+                    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
+                }
             }
 
             &:nth-of-type(even) {
                 margin: 8px 0 8px 8px;
+
+                &:hover {
+                    position: relative;
+                    margin: 2px 0 14px 8px;
+                    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
+                }
             }
 
             .x-box-content {

frontend/saas-web/app/view/home/charts/MonthIO.js

@@ -3,9 +3,10 @@ Ext.define('saas.view.home.charts.MonthIO', {
     xtype: 'month-io',
     id: 'month_io',
 
-    bind: {
-        title: '本月收入支出额（万元）<div style="text-align: right;"><span style="font-weight:bold;">收入：{month_in}</span><span style="font-weight:bold;margin-left: 10px;">支出：{month_out}</span></div>'
-    },
+    // bind: {
+    //     title: '本月收入支出额（万元）<div style="text-align: right;"><span style="font-weight:bold;">收入：{month_in}</span><span style="font-weight:bold;margin-left: 10px;">支出：{month_out}</span></div>'
+    // },
+    title: '本月收入支出额（万元）',
 
     initComponent: function () {
         var me = this;
@@ -18,27 +19,18 @@ Ext.define('saas.view.home.charts.MonthIO', {
                     '#82CCFF'
                 ],
                 bind: {
-                    // captions: {
-                    //     title: {
-                    //         text: '收入：{month_in}\t支出：{month_out}',
-                    //         style: {
-                    //             'color': '#485465',
-                    //             'letter-spacing': '-0.07px'
-                    //         },
-                    //         align: 'left'
-                    //     },
-                    // },
+                    legend: {
+                        type: 'dom',
+                        docked: 'top',
+                        padding: 0,
+                        bodyPadding: 0,
+                        border: 0,
+                        cls: 'x-monthio-legend',
+                        html: '<div class="sumtip"><span>收入：{month_in}</span><span>支出：{month_out}</span></div>'
+                    },
                     insetPadding: '{insetPadding}',
                     store: '{month_io}'
                 },
-                legend: {
-                    type: 'dom',
-                    docked: 'top',
-                    padding: 0,
-                    bodyPadding: 0,
-                    border: 0,
-                    cls: 'x-monthio-legend'
-                },
                 axes: [{
                     type: 'numeric',
                     position: 'left',
@@ -51,10 +43,10 @@ Ext.define('saas.view.home.charts.MonthIO', {
                     },
                     grid: {
                         even: {
-                            stroke: '#E2E7ED'
+                            stroke: '#E5EAEF'
                         },
                         odd: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         }
                     },
                     style: {
@@ -70,7 +62,7 @@ Ext.define('saas.view.home.charts.MonthIO', {
                         fillStyle: '#485465'
                     },
                     style: {
-                        fill: '#E2E7ED',
+                        fill: '#E5EAEF',
                         strokeStyle: 'transparent'
                     },
                 }],

frontend/saas-web/app/view/home/charts/MonthIO.scss

@@ -5,10 +5,21 @@
 
 .x-monthio-legend {
 
+    .sumtip {
+        position: absolute;
+        right: 0;
+        top: 8px;
+        font-size: 12px;
+
+        span:last-child {
+            margin-left: 12px;
+        }
+    }
     .x-legend-inner {
         padding: 0;
 
         .x-legend-container {
+            text-align: left;
 
             .x-legend-item {
                 font-size: 12px;

frontend/saas-web/app/view/home/charts/MonthPurchase.js

@@ -30,7 +30,7 @@ Ext.define('saas.view.home.charts.MonthPurchase', {
                         fillStyle: '#485465',
                     },
                     style: {
-                        fill: '#E2E7ED',
+                        fill: '#E5EAEF',
                         strokeStyle: 'transparent'
                     },
                     renderer: me.onCategoryLabelRender
@@ -41,10 +41,10 @@ Ext.define('saas.view.home.charts.MonthPurchase', {
                     adjustByMajorUnit: true,
                     grid: {
                         even: {
-                            stroke: '#E2E7ED'
+                            stroke: '#E5EAEF'
                         },
                         odd: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         }
                     },
                     label: {

frontend/saas-web/app/view/home/charts/MonthSale.js

@@ -20,28 +20,12 @@ Ext.define('saas.view.home.charts.MonthSale', {
                     store: '{month_sale}',
                 },
                 colors: [
-                    '#2C82BE',
+                    '#1EC09F',
                     '#27A7FF',
-                    '#82CCFF',
-                    '#53A8E2',
+                    '#4E84F5',
+                    '#FDC200',
                     '#76DDFB',
-                    '#DBECF8',
-                    '#426AB3',
-                    '#228FBD',
-                    '#2A5CAA',
-                    '#7BBFEA',
-                    '#2A8FBD',
-                    '#4C556E',
-                    '#9999FF',
-                    '#CCCCFF',
-                    '#06B9D1',
-                    '#005A78',
-                    '#00466B',
-                    '#005687',
-                    '#05173B',
-                    '#1A4FA3',
-                    '#1E90FF',
-                    '#B0E0E6'
+                    '#FE7D6B',
                 ],
                 interactions: ['rotate', 'itemhighlight'],
                 innerPadding: 2,

frontend/saas-web/app/view/home/charts/ProfitDetail.js

@@ -30,7 +30,7 @@ Ext.define('saas.view.home.charts.ProfitDetail', {
                         fillStyle: '#485465',
                     },
                     style: {
-                        fill: '#E2E7ED',
+                        fill: '#E5EAEF',
                         strokeStyle: 'transparent'
                     },
                     renderer: me.onCategoryLabelRender
@@ -41,10 +41,10 @@ Ext.define('saas.view.home.charts.ProfitDetail', {
                     adjustByMajorUnit: true,
                     grid: {
                         even: {
-                            stroke: '#E2E7ED'
+                            stroke: '#E5EAEF'
                         },
                         odd: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         }
                     },
                     label: {

frontend/saas-web/app/view/home/charts/PurchaseTrend.js

@@ -34,7 +34,7 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
                         fillStyle: '#485465'
                     },
                     style: {
-                        fill: '#E2E7ED',
+                        fill: '#E5EAEF',
                         strokeStyle: 'transparent'
                     },
                     renderer: me.categoryRender
@@ -44,10 +44,10 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
                     position: 'left',
                     grid: {
                         even: {
-                            stroke: '#E2E7ED'
+                            stroke: '#E5EAEF'
                         },
                         odd: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         }
                     },
                     label: {

frontend/saas-web/app/view/home/charts/SaleTrend.js

@@ -40,7 +40,7 @@ Ext.define('saas.view.home.charts.SaleTrend', {
                         fillStyle: '#485465',
                     },
                     style: {
-                        fill: '#E2E7ED',
+                        fill: '#E5EAEF',
                         strokeStyle: 'transparent'
                     },
                     renderer: me.categoryRender
@@ -50,10 +50,10 @@ Ext.define('saas.view.home.charts.SaleTrend', {
                     position: 'left',
                     grid: {
                         even: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         },
                         odd: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         }
                     },
                     label: {
@@ -137,7 +137,7 @@ Ext.define('saas.view.home.charts.SaleTrend', {
                     padding: 0,
                     bodyPadding: 0,
                     border: 0,
-                    cls: 'x-monthio-legend'
+                    cls: 'x-saletrend-legend'
                 },
                 listeners: {
                     itemhighlightchange: me.itemhighlightchange

frontend/saas-web/app/view/home/charts/SaleTrend.scss

@@ -0,0 +1,29 @@
+.quick-graph-panel .x-panel-header-default .x-panel-header-title-default > .x-title-text-default {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+.x-saletrend-legend {
+
+    .x-legend-inner {
+        padding: 0;
+
+        .x-legend-container {
+            text-align: left;
+
+            .x-legend-item {
+                font-size: 12px;
+                border: none !important;
+                outline: none !important;
+                text-align: left;
+
+                .x-legend-item-marker {
+                    box-shadow: none;
+                    height: 2px;
+                    margin-top: 5px;
+                    width: 10px;
+                }
+            }
+        }
+    }
+}

frontend/saas-web/app/view/home/charts/StockAmount.js

@@ -34,7 +34,7 @@ Ext.define('saas.view.home.charts.StockAmount', {
                         fillStyle: '#485465'
                     },
                     style: {
-                        fill: '#E2E7ED',
+                        fill: '#E5EAEF',
                         strokeStyle: 'transparent'
                     },
                     renderer: me.categoryRender
@@ -44,10 +44,10 @@ Ext.define('saas.view.home.charts.StockAmount', {
                     position: 'left',
                     grid: {
                         even: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         },
                         odd: {
-                            stroke: '#E2E7ED',
+                            stroke: '#E5EAEF',
                         }
                     },
                     label: {