首页样式调整

frontend/saas-web/app/view/core/base/BasePanel.scss

@@ -1,5 +1,5 @@
 .core-base-basepanel{
-    background: #EEF4F9;
+    background: $panel-body-background;
 
     .x-panel-default-outer-border-trl {
         border-top-color: #fff !important;

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

@@ -1,7 +1,7 @@
 Ext.define('saas.view.core.chart.ChartBase', {
     extend: 'Ext.panel.Panel',
 
-    height: 300,
+    height: 280,
     bodyPadding: '16 16 16 0',
 
     layout: 'fit',

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

@@ -17,12 +17,12 @@
                 &:before {
                     content: ' ';
                     position: absolute;
-                    width: 9px;
-                    height: 9px;
-                    background: #2C82BE;
-                    // border-radius: 50%;
-                    left: 0px;
-                    top: 5px;
+                    width: 5px;
+                    height: 16px;
+                    border-radius: 4px;
+                    background: #2c82be;
+                    left: 4px;
+                    top: 1px;
                 }
             }
         }

frontend/saas-web/app/view/core/form/FormPanel.js

@@ -17,7 +17,7 @@ Ext.define('saas.view.core.form.FormPanel', {
     initId: 0,
     layout: 'column',
     autoScroll: true,
-    bodyPadding: 0,
+    bodyPadding: '8 12 8 12',
 
     fieldDefaults: {
         margin: '0 0 10 0',

frontend/saas-web/app/view/core/query/QueryPanel.scss

@@ -8,7 +8,7 @@
 
             .x-box-inner {
                 cursor: default;
-                background: #EEF4F9;
+                background: $panel-body-background;
 
                 .x-box-target {
                     .x-queryform {

frontend/saas-web/app/view/core/tab/Panel.js

@@ -2,7 +2,14 @@ Ext.define('saas.view.core.tab.Panel', {
     extend: 'Ext.panel.Panel',
     xtype: 'core-tab-panel',
     controller: 'core-tab-controller',
+
+    cls: 'x-core-tab',
     layout: 'fit',
+    margin: '16 0 16 16',
+    defaults: {
+        padding: '0 16 0 0'
+    },
+    closable: true,
     
     listeners: {
         activate: 'onTabActivate',

frontend/saas-web/app/view/core/tab/Panel.scss

@@ -0,0 +1,5 @@
+.x-core-tab {
+    &>div>.x-panel-body {
+        background: $panel-body-background;
+    }
+}

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

@@ -14,9 +14,8 @@ Ext.define('saas.view.home.Home', {
     },
 
     cls: 'x-home-panel',
-
+    padding: '0 16 0 0',
     layout: 'responsivecolumn',
-
     scrollable: true,
 
     REFRESH_INTERVALS: 5 * 60 * 1000, // 刷新间隔
@@ -51,8 +50,7 @@ Ext.define('saas.view.home.Home', {
             padding: '0 0 0 14',
         }, {
             xtype: 'key-data',
-            margin: 0,
-            padding: '0 0 8 14',
+            margin: 0
         }]
     }, {
         xtype: 'panel',

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

@@ -114,7 +114,7 @@ $unaudit-purc-container-color: dynamic(#e91e63);
     }
 
     & > .x-panel-bodyWrap > .x-panel-body >.x-autocontainer-outerCt > .x-autocontainer-innerCt {
-        background: #EEF4F9;
+        background: $panel-body-background;
         display: flex;
         justify-content: space-around;
 

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

@@ -8,10 +8,8 @@ Ext.define('saas.view.home.InfoCard', {
         'Ext.layout.container.Card'
     ],
 
-    BaseUtil: Ext.create('saas.util.BaseUtil'),
-
     layout: 'card',
-    height: 150,
+    height: 110,
 
     cardTpl: [
         '<div class="x-row">',
@@ -22,8 +20,8 @@ Ext.define('saas.view.home.InfoCard', {
         '<tpl if="color"> x-bg-{color}</tpl>',
         '<tpl else"> x-bg-default</tpl>',
         '">',
-        '<h3>{title}</h3>',
-        '<p>{content}</p>',
+        '<div class="title">{title}</div>',
+        '<div class="value">{content}</div>',
         '</div>',
         '</div>',
         '</div>',
@@ -71,9 +69,10 @@ Ext.define('saas.view.home.InfoCard', {
             lbar: [{
                 itemId: 'card-prev',
                 hidden: true,
+                margin: '0 8 0 0',
                 cls: 'x-scroller-button x-scroller-button-left',
                 handler: function() {
-                    me. showPrevious();
+                    me.showPrevious();
                 },
                 disabled: true
             }],
@@ -109,7 +108,7 @@ Ext.define('saas.view.home.InfoCard', {
         cards = me.cards,
         datas = [],
         items = [];
-        size = Math.ceil(me.body.el.getBox().width / 235);
+        size = Math.ceil(me.body.el.getBox().width / 230);
 
         me.removeAll();
 

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

@@ -1,53 +1,68 @@
-$max-card-width: 235px;
+$max-card-width: 230px;
+$card-box-height: 110px;
 
 .x-info-card {
+    .x-panel-body {
+        background: transparent;
 
-    .x-panel-bodyWrap {
-        .x-autocontainer-innerCt {
-            .x-component {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                height: 100%;
+        .x-panel-bodyWrap {
+            .x-autocontainer-innerCt {
+                .x-component {
+                    height: 100%;
+                    .x-row {
+                        background: $panel-body-background;
+                        display: flex;
+                        height: 100%;
+                        width: 100%;
+                        justify-content: flex-start;
+                    
+                        .x-col {
+                    
+                            flex: 1;
+                            max-width: $max-card-width;
+                            color: #fff;
+                            padding: 0 8px;
+                            display: flex;
 
-                .x-row {
-                    display: flex;
-                    width: 100%;
-                    justify-content: flex-start;
-                
-                    .x-col {
-                
-                        flex: 1;
-                        max-width: $max-card-width;
-                        color: #fff;
-                        padding: 10px;
-                
-                        .x-box {
-                            padding: 16px;
-                            height: 120px;
-                            border-radius: 0.5rem;
-                            position: relative;
-                            display: block;
-                            cursor: pointer;
-                
-                            &:hover {
-                                opacity: 0.7;
+                            &:first-child {
+                                padding: 0 8px 0 0;
                             }
+                    
+                            &> div {
+                                flex: 1;
+                                display: flex;
+                                align-items: center;
     
-                            h3 {
-                                text-align: center;
-                                font-size: 16px;
+                                .x-box {
+                                    padding: 24px;
+                                    height: $card-box-height;
+                                    border-radius: 6px;
+                                    position: relative;
+                                    display: flex;
+                                    cursor: pointer;
+                                    flex: 1;
+                                    flex-direction: column;
+                        
+                                    &:hover {
+                                        opacity: 0.7;
+                                    }
+            
+                                    .title {
+                                        font-size: 16px;
+                                        font-weight: bold;
+                                    }
+                        
+                                    .value {
+                                        font-size: 24px;
+                                        text-align: center;
+                                        margin-top: 22px;
+                                    }
+                        
+                                }
+                                .x-box.x-view-item-focused {
+                                    outline: none !important;
+                                }
                             }
-                
-                            p {
-                                font-size: 24px;
-                                text-align: center;
-                                margin-top: 32px;
-                            }
-                
-                        }
-                        .x-box.x-view-item-focused {
-                            outline: none !important;
                         }
                     }
                 }
@@ -57,6 +72,11 @@ $max-card-width: 235px;
 
     .x-toolbar-default-vertical {
         padding: 0;
+        background-color: transparent;
+
+        .x-box-target {
+            height: 100%;
+        }
     }
 
     .x-mask {
@@ -69,15 +89,16 @@ $max-card-width: 235px;
     z-index: 1;
     width: 44px !important;
     min-width: 44px !important;
-    height: 145px !important;
+    height: 100% !important;
     padding: 0 !important;
-    background-color: white !important;
+    background-color: transparent !important;
     border: none !important;
     box-shadow: none !important;
     background-repeat: no-repeat !important;
     background-size: 30px !important;
     background-position-y: center !important;
     background-position-x: 6px !important;
+    cursor: pointer;
 }
 
 .x-scroller-button-left {
@@ -102,22 +123,22 @@ $max-card-width: 235px;
 }
 
 .x-bg-default {
-    background: linear-gradient(to right, #25CBDB , #5161F1);
+    background: linear-gradient(to right, #19C0D5 , #7AEBF8);
 }
 .x-bg-yellow {
-    background: linear-gradient(to right, #F4BF59 , #F99A50);
+    background: linear-gradient(to right, #FA964D , #FCC002);
 }
 .x-bg-purple {
-    background: linear-gradient(to right, #946DFF , #7460FF);
+    background: linear-gradient(to right, #6B73FD , #B195FF);
 }
 .x-bg-red {
-    background: linear-gradient(to right, #FA8B86 , #F36487);
+    background: linear-gradient(to right, #F25F88 , #FFA4BA);
 }
 .x-bg-blue {
-    background: linear-gradient(to right, #1AD0C5 , #26CBDB);
+    background: linear-gradient(to right, #6B6CFA , #58C5F6);
 }
 .x-bg-pink {
-    background: linear-gradient(to right, #FA8A86 , #F26187);
+    background: linear-gradient(to right, #F66F6D , #FD9C8D);
 }
 .x-bg-gray {
     background: linear-gradient(to right, #D8D8D8 , #D8D8D8);

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

@@ -5,38 +5,30 @@ Ext.define('saas.view.home.charts.KeyData', {
     id: 'key_data',
     cls: 'quick-graph-panel',
 
-    title: '关键数据',
+    // title: '关键数据',
 
     layout: 'fit',
-    height: 300,
+    height: 280,
+    padding: 0,
 
     cardTpl: [
         '<div class="x-container">',
             '<tpl for=".">',
-                '<div class="x-box x-box-{color}">',
-                    '<div class="x-box-content">',
-                        '<tpl if="showIcon">',
-                            '<div class="x-icon x-icon-{icon}"></div>',
-                        '</tpl>',
-                        '<div class="x-text',
-                            '<tpl if="!showIcon">',
-                                ' x-text-small',
-                            '</tpl>',
-                        '">',
-                            '<tpl if="!showIcon">',
-                                '<div class="x-icon-small x-icon-{icon}"></div>',
-                            '</tpl>',
-                            '<div class="x-key"><span>{label}</span></div>',
-                            '<div class="x-value"><span>{value}</span></div>',
-                        '</div>',
+            '<div class="x-box x-box-{color}">',
+                '<div class="x-box-content">',
+                    '<div class="x-title">{label}</div>',
+                    '<div class="x-contain">',
+                        '<div class="x-icon x-icon-{icon}"></div>',
+                        '<div class="x-value">￥{value}元</div>',
                     '</div>',
                 '</div>',
+            '</div>',
             '</tpl>',
         '</div>'
     ],
 
     cards: [{
-        color: 'green',
+        color: 'yellow',
         showIcon: true,
         icon: 'storageTotal',
         name: 'storageTotal',
@@ -46,7 +38,7 @@ Ext.define('saas.view.home.charts.KeyData', {
         title: '物料库存数量金额表查询',
         id: 'stock-report-datalist',
     }, {
-        color: 'yellow',
+        color: 'purple',
         showIcon: true,
         icon: 'receiveTotal',
         name: 'receiveTotal',

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

@@ -6,126 +6,146 @@
         height: 100%;
         display: flex;
         flex-wrap: wrap;
+        background: $panel-body-background;
 
         .x-box {
-            width: calc(50% - 16px);
-            border-width: 5px 1px 1px;
-            border-style: solid;
-            border-color: #1EC09F;
+            width: calc(50% - 9px);
+            background: #fff;
             cursor: pointer;
             transition: all 0.4s ease;
+            outline: none !important;
 
-            &:nth-of-type(odd) {
-                margin: 8px 8px 8px 0;
+            &:nth-child(1) {
+                margin: 0 8px 8px 0;
 
-                &:hover {
-                    margin: 2px 8px 14px 0;
-                    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
-                }
+                // &:hover {
+                //     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;
+            &:nth-child(2) {
+                margin: 0 0 8px 8px;
 
-                &:hover {
-                    margin: 2px 0 14px 8px;
-                    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
-                }
+                // &:hover {
+                //     margin: 2px 0 14px 8px;
+                //     box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
+                // }
+            }
+
+            &:nth-child(3) {
+                margin: 8px 8px 0 0;
+
+                // &:hover {
+                //     margin: 2px 8px 14px 0;
+                //     box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
+                // }
+            }
+
+            &:nth-child(4) {
+                margin: 8px 0 0 8px;
+
+                // &:hover {
+                //     margin: 2px 0 14px 8px;
+                //     box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.12);
+                // }
             }
 
             .x-box-content {
                 display: flex;
+                flex-direction: column;
                 height: 100%;
-                padding: 16px;
-
-                .x-icon {
-                    flex: 4;
-                    max-width: 48px;
-                    background-repeat: no-repeat;
-                    background-size: contain;
-                    background-position: center;
-
-                    &-small {
-                        opacity: 0.7;
-                        width: 36px;
-                        height: 36px;
-                        position: relative;
-                        background-repeat: no-repeat;
-                        background-size: contain; 
-                    }
 
-                    &-storageTotal {
-                        background-image: url(get-resource-path('images/home/storageTotal.png'));
-                    }
-                    &-receiveTotal {
-                        background-image: url(get-resource-path('images/home/receiveTotal.png'));
-                    }
-                    &-payTotal {
-                        background-image: url(get-resource-path('images/home/payTotal.png'));
-                    }
-                    &-balanceTotal {
-                        background-image: url(get-resource-path('images/home/balanceTotal.png'));
-                    }
+                .x-title {
+                    flex: 1;
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 14px;
+                    padding: 0 20px;
+                    color: #fff;
+                    border-radius: 4px 4px 0 0;
                 }
+                .x-contain {
+                    border-style: solid;
+                    border-width: 0 1px 1px 1px;
+                    height: 100%;
 
-                .x-text {
-                    flex: 6;
-                    display: flex;
-                    color: #485465;
-                    flex-direction: column;
-                    align-items: flex-end;
-                    overflow: hidden;
-
-                    .x-key {
-                        flex: 1;
-                        display: flex;
-                        align-items: flex-end;
-                        margin-bottom: 5px;
-                        font-size: 14px;
-                        color: #485465;
+                    .x-icon {
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        background-position: center;
+                        width: 100%;
+                        height: 40px;
+                        margin: 14px 0 7px 0;
+    
+                        &-storageTotal {
+                            background-image: url(get-resource-path('images/home/storageTotal.png'));
+                        }
+                        &-receiveTotal {
+                            background-image: url(get-resource-path('images/home/receiveTotal.png'));
+                        }
+                        &-payTotal {
+                            background-image: url(get-resource-path('images/home/payTotal.png'));
+                        }
+                        &-balanceTotal {
+                            background-image: url(get-resource-path('images/home/balanceTotal.png'));
+                        }
                     }
-                
+    
                     .x-value {
-                        flex: 1;
-                        display: flex;
-                        align-items: flex-start;
+                        text-align: center;
                         font-size: 16px;
                         color: #1E2429;
-                        text-overflow: ellipsis;
+                        letter-spacing: 0.19px;
+                        padding: 0 20px;
                         overflow: hidden;
-                    }
-
-                    &-small {
-                        display: block;
-
-                        .x-key {
-                            text-align: end;
-                            display: block;
-                            padding-left: 54px;
-                            margin-top: -17px;
-                            margin-bottom: 14px;
-                        }
-
-                        .x-value {
-                            display: block;
-                            text-align: end;
-                        }
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
                 }
             }
         }
 
-        .x-box-green {
-            border-color: #1EC09F;
-        }
         .x-box-yellow {
-            border-color: #FDC200;
+            .x-box-content {
+                .x-title {
+                    background-image: linear-gradient(270deg, #FFE300 0%, #FBAC27 100%);
+                }
+                .x-contain {
+                    border-color: #FDC200;
+                }
+            }
+        }
+        .x-box-purple {
+            .x-box-content {
+                .x-title {
+                    background-image: linear-gradient(270deg, #A58FFF 0%, #7477FE 100%);
+                }
+                .x-contain {
+                    border-color: #7477FE;
+                }
+            }
         }
         .x-box-red {
-            border-color: #FB6A83;
+
+            .x-box-content {
+                .x-title {
+                    background-image: linear-gradient(270deg, #FDA3B9 0%, #F2668C 100%);
+                }
+                .x-contain {
+                    border-color: #FB6A83;
+                }
+            }
         }
         .x-box-blue {
-            border-color: #62A3DF;
+            .x-box-content {
+                .x-title {
+                    background-image: linear-gradient(270deg, #87DBFF 0%, #27A7FF 100%);
+                }
+                .x-contain {
+                    border-color: #33AEFF;
+                }
+            }
         }
     }
 }

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

@@ -40,18 +40,18 @@ Ext.define('saas.view.home.charts.SaleTrend', {
             name: '销售额',
             type: 'line',
             data: sale,
-            symbolSize: 1,
-            areaStyle: {
-                color: '#EDF6FC',
-            }
+            symbolSize: 8,
+            // areaStyle: {
+            //     color: '#EDF6FC',
+            // }
         }, {
             name: '销售回款',
             type: 'line',
             data: saleBack,
-            symbolSize: 1,
-            areaStyle: {
-                color: '#FBEDEF',
-            }
+            symbolSize: 8,
+            // areaStyle: {
+            //     color: '#FBEDEF',
+            // }
         }]);
         return {
             color: [

frontend/saas-web/app/view/main/Main.scss

@@ -7,6 +7,8 @@ $font-weight-bold: dynamic(500);
 $accordion-header-background-color: dynamic($lightest-color);
 $accordion-header-color: dynamic(#333);
 
+$panel-body-background: dynamic(#EEF4F9) !default;
+
 $treelist-nav-ui: (
         padding: 0 10px,
         background-color: $panel-navigation-background-color,
@@ -53,7 +55,7 @@ $treelist-nav-ui: (
         //     }
         // }
         #main-tab-panel-body {
-            background: #EEF4F9;
+            background: $panel-body-background;
 
         }
     }

frontend/saas-web/app/view/main/MainContainerWrap.js

@@ -28,8 +28,7 @@ Ext.define('saas.view.main.MainContainerWrap', {
             cls: 'main-right-tabpanel',
             itemId: 'contentPanel',
             defaults: {
-                closable: true,
-                margin: 16
+                xtype: 'core-tab-panel',
             },
             plugins: [new Ext.ux.TabCloseMenu({
                 closeTabText: '关闭当前页',
@@ -37,10 +36,12 @@ Ext.define('saas.view.main.MainContainerWrap', {
                 closeOthersTabsText: '关闭其他页'
             })],
             items: [{
-                xtype: 'core-tab-panel',
                 iconCls: 'x-sa sa-home',
                 title: '首页',
                 closable: false,
+                // margin: '16 0 16 16',
+                // scrollable: true,
+                // bodyPadding: '0 16 0 0',
                 items: [{
                     xtype: 'home',
                 }]