Browse Source

部分样式修改

zhuth 7 years ago
parent
commit
c5fcbc8e86

+ 137 - 97
frontend/saas-web/app/Application.scss

@@ -83,7 +83,9 @@ body.launching {
 .x-form-text-default,
 .x-column-header,
 .x-grid-item,
-.x-grid-row-summary .x-grid-cell, .x-grid-row-summary .x-grid-rowwrap, .x-grid-row-summary .x-grid-cell-rowbody,
+.x-grid-row-summary .x-grid-cell,
+.x-grid-row-summary .x-grid-rowwrap,
+.x-grid-row-summary .x-grid-cell-rowbody,
 .x-boundlist-item {
   // font-family: 'pingFangSC-Regular';
 }
@@ -106,7 +108,7 @@ body.launching {
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
   .x-btn-inner-default-toolbar-small {
-    color: #34BAF6 ;
+    color: #34BAF6;
   }
 }
 
@@ -120,6 +122,7 @@ body.launching {
   .x-form-text-default {
     background: #EEF1F7;
   }
+
   .x-form-trigger {
     background: #EEF1F7;
   }
@@ -133,21 +136,21 @@ body.launching {
   opacity: 0.72;
 }
 
-.x-btn-over{
-  .x-btn-wrap{
-    .x-btn-button{
-      .x-btn-inner{
-        color:#fff;
+.x-btn-over {
+  .x-btn-wrap {
+    .x-btn-button {
+      .x-btn-inner {
+        color: #fff;
       }
     }
   }
 }
 
 .x-toolbar {
-  .x-btn-over.x-btn-plain-toolbar-small{
-    .x-btn-wrap{
-      .x-btn-button{
-        .x-btn-inner{
+  .x-btn-over.x-btn-plain-toolbar-small {
+    .x-btn-wrap {
+      .x-btn-button {
+        .x-btn-inner {
           color: #606060;
         }
       }
@@ -155,21 +158,21 @@ body.launching {
   }
 }
 
-.x-btn-pressed{
-  .x-btn-wrap{
-    .x-btn-button{
-      .x-btn-inner{
-        color:#fff !important;
+.x-btn-pressed {
+  .x-btn-wrap {
+    .x-btn-button {
+      .x-btn-inner {
+        color: #fff !important;
       }
     }
   }
 }
 
-.x-btn-showicon{
-  .x-btn-wrap{
-    .x-btn-button{
-      .x-btn-inner{
-        color:#999 !important;
+.x-btn-showicon {
+  .x-btn-wrap {
+    .x-btn-button {
+      .x-btn-inner {
+        color: #999 !important;
       }
     }
   }
@@ -179,12 +182,12 @@ body.launching {
   background: inherit;
   opacity: 1;
   box-shadow: none;
-  border:1px solid #34BAF6;
+  border: 1px solid #34BAF6;
 }
 
 .x-segmented-button-item .x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small {
   background: #34BAF6 !important;
-  border:1px solid #34BAF6 !important;
+  border: 1px solid #34BAF6 !important;
   opacity: 1;
   box-shadow: none;
 }
@@ -208,42 +211,46 @@ body.launching {
 }
 
 .x-btn-default-small,
-.x-btn-default-toolbar-small{
-  border-radius: 2px !important;
+.x-btn-default-toolbar-small {
+  border-radius: 2px;
 }
 
 .x-formpanel-btn-orange {
   border-color: #f67f00;
-  background: linear-gradient(to bottom,#da7101 0,#f67f00 100%) !important;
-  
-  .x-btn-inner-default-toolbar-small{
-      color:#fff !important;
+  background: linear-gradient(to bottom, #da7101 0, #f67f00 100%) !important;
+
+  .x-btn-inner-default-toolbar-small {
+    color: #fff !important;
   }
 }
 
 .x-formpanel-btn-blue {
   background: #34BAF6;
   border-color: #34BAF6;
-  .x-btn-inner-default-toolbar-small{
-      color:#fff !important;
+
+  .x-btn-inner-default-toolbar-small {
+    color: #fff !important;
   }
 }
+
 .x-formpanel-btn-white {
-    border: 1px solid #c1c1c1 !important;
-    //border-radius: 2px;
-    //box-shadow: 0 1px 1px rgba(0,0,0,.15);
-    /*background: #fff;
+  border: 1px solid #c1c1c1 !important;
+
+  //border-radius: 2px;
+  //box-shadow: 0 1px 1px rgba(0,0,0,.15);
+  /*background: #fff;
     background: -moz-linear-gradient(top,#fff,#f4f4f4);
     background: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f4f4f4));
     background: -o-linear-gradient(top,#fff,#f4f4f4);
     background: -ms-linear-gradient(top,#fff 0,#f4f4f4 100%);
     background: linear-gradient(top,#fff,#f4f4f4); */
-    // border-color: #fff;
-    // background: linear-gradient(to bottom,#fff,#f4f4f4 100%) !important;
-    .x-btn-inner-default-toolbar-small{
-      color: #555;
+  // border-color: #fff;
+  // background: linear-gradient(to bottom,#fff,#f4f4f4 100%) !important;
+  .x-btn-inner-default-toolbar-small {
+    color: #555;
   }
 }
+
 .x-grid-body {
   border-width: 1px;
   border-color: #ABDAFF;
@@ -303,7 +310,8 @@ body.launching {
   border-width: 0 1px 0 0;
 }
 
-.x-grid-scrollbar-clipper-locked, .x-grid-scrollbar-locked {
+.x-grid-scrollbar-clipper-locked,
+.x-grid-scrollbar-locked {
   // border-color: #ABDAFF;
   border-color: transparent;
 }
@@ -322,7 +330,7 @@ body.launching {
   border-color: transparent;
 }
 
-.x-keyboard-mode  .x-grid-item-focused .x-grid-cell-inner:before {
+.x-keyboard-mode .x-grid-item-focused .x-grid-cell-inner:before {
   border: none;
 }
 
@@ -344,6 +352,7 @@ div::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
+
 div::-webkit-scrollbar-thumb {
   background: #C2EAFC;
   border-radius: 8px;
@@ -352,75 +361,95 @@ div::-webkit-scrollbar-thumb {
     background: #74c3e6;
   }
 }
+
 div::-webkit-scrollbar-track {
   background: #fff;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
 }
+
 /**date-picker*/
 .x-datepicker-month .x-btn-inner {
   font-size: 12px;
 }
+
 .x-datepicker {
   width: 212px;
 }
+
 .x-datepicker-column-header {
   width: 30px;
 }
+
 .x-datepicker-column-header-inner {
   line-height: 25px;
   padding: 0 9px 0 0;
 }
+
 .x-datepicker-cell {
   text-align: right;
   border: 1px solid #fff;
 }
+
 .x-datepicker-date {
   padding: 0 7px 0 0;
   cursor: pointer;
   line-height: 23px;
 }
-.x-datepicker-footer, .x-monthpicker-buttons {
+
+.x-datepicker-footer,
+.x-monthpicker-buttons {
   padding: 3px 0;
   text-align: center;
 }
+
 .x-monthpicker {
   width: 212px;
   border-width: 1px;
 }
+
 .x-monthpicker-months {
   width: 105px;
 }
+
 .x-monthpicker-item-inner {
   margin: 0 5px 0 5px;
   line-height: 22px;
 }
+
 .x-monthpicker-months .x-monthpicker-item {
   width: 52px;
 }
+
 .x-monthpicker-years {
   width: 105px;
 }
+
 .x-monthpicker-years .x-monthpicker-item {
   width: 52px;
 }
+
 .x-monthpicker-yearnav {
   height: 34px;
 }
+
 .x-monthpicker-yearnav-button-ct {
   width: 52px;
 }
+
 .x-monthpicker-yearnav-button {
   height: 12px;
   width: 12px;
   cursor: pointer;
   margin-top: 11px;
 }
-.x-datepicker-footer .x-btn-default-toolbar-small{
+
+.x-datepicker-footer .x-btn-default-toolbar-small {
   padding: 2px 2px 2px 2px;
   min-width: 56px;
 }
-.x-monthpicker-buttons .x-btn-default-toolbar-small{
+
+.x-monthpicker-buttons .x-btn-default-toolbar-small {
   padding: 2px 2px 2px 2px;
   min-width: 56px;
 }
@@ -435,7 +464,7 @@ div::-webkit-scrollbar-track {
 .x-form-field-date .x-form-date-trigger {
   background: #F1F9FF;
   border-left: 1px solid #D2D6E5;
-  
+
   &:before {
     // content: "\e80f";
     // font-family: font-saas;
@@ -445,55 +474,61 @@ div::-webkit-scrollbar-track {
 
 /** toast **/
 
-.x-toast-success{
+.x-toast-success {
   border-color: #adeaa4 !important;
   border-radius: 4px !important;
-  .x-window-body{
-      background: #f3ffef !important;
-      border-color: #f3ffef !important;
+
+  .x-window-body {
+    background: #f3ffef !important;
+    border-color: #f3ffef !important;
   }
-  .x-autocontainer-innerCt{
-      word-wrap: break-word;
-      color: #3ec12a;
-      padding: 4px 30px 4px 46px !important;
+
+  .x-autocontainer-innerCt {
+    word-wrap: break-word;
+    color: #3ec12a;
+    padding: 4px 30px 4px 46px !important;
   }
-  .x-autocontainer-innerCt::before{
-      margin-left: -19px;
-      margin-top: 1px;
-      content: ' ';
-      width: 16px;
-      position: absolute;
-      display: block;
-      height: 16px;
-      background: url(../../../../resources/images/default/toast_over.png) 0 0 no-repeat; 
-      background-size: 16px 16px;
-      background-position: center;
+
+  .x-autocontainer-innerCt::before {
+    margin-left: -19px;
+    margin-top: 1px;
+    content: ' ';
+    width: 16px;
+    position: absolute;
+    display: block;
+    height: 16px;
+    background: url(../../../../resources/images/default/toast_over.png) 0 0 no-repeat;
+    background-size: 16px 16px;
+    background-position: center;
   }
 }
 
-.x-toast-error{
+.x-toast-error {
   border-color: #f39d70 !important;
   border-radius: 4px !important;
-  .x-window-body{
-      background: #fdefcd !important;
-      border-color: #fdefcd !important;
+
+  .x-window-body {
+    background: #fdefcd !important;
+    border-color: #fdefcd !important;
   }
-  .x-autocontainer-innerCt{
-      word-wrap: break-word;
-      color: #ea800e;
-      padding: 4px 30px 4px 46px !important;
+
+  .x-autocontainer-innerCt {
+    word-wrap: break-word;
+    color: #ea800e;
+    padding: 4px 30px 4px 46px !important;
   }
-  .x-autocontainer-innerCt::before{
-      margin-left: -19px;
-      margin-top: 1px;
-      content: ' ';
-      width: 16px;
-      position: absolute;
-      display: block;
-      height: 16px;
-      background: url(../../../../resources/images/default/toast_close.png) 0 0 no-repeat; 
-      background-size: 16px 16px;
-      background-position: center;
+
+  .x-autocontainer-innerCt::before {
+    margin-left: -19px;
+    margin-top: 1px;
+    content: ' ';
+    width: 16px;
+    position: absolute;
+    display: block;
+    height: 16px;
+    background: url(../../../../resources/images/default/toast_close.png) 0 0 no-repeat;
+    background-size: 16px 16px;
+    background-position: center;
   }
 }
 
@@ -504,7 +539,7 @@ div::-webkit-scrollbar-track {
 
 /** tabclosemenu **/
 .x-menu.x-tab-close-menu {
-  & > div > div > div.x-box-inner.x-box-scroller-body-vertical.x-scroller > div > div > a > span {
+  &>div>div>div.x-box-inner.x-box-scroller-body-vertical.x-scroller>div>div>a>span {
     margin-left: 28px;
   }
 }
@@ -513,8 +548,8 @@ div::-webkit-scrollbar-track {
 .x-responsivecolumn {
   padding: 0;
 
-  & > * {
-      margin: 0;
+  &>* {
+    margin: 0;
 
   }
 }
@@ -561,15 +596,20 @@ div::-webkit-scrollbar-track {
 // 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%);
-   }
+  >.small-100 {
+    float: left;
+    // width: 100%;
+    @include responsivecolumn-item(100%);
+  }
+
+  >.small-50 {
+    float: left;
+    // width: 50%;
+    @include responsivecolumn-item(50%);
+  }
+}
+
+input::-webkit-input-placeholder {
+  /* placeholder颜色  */
+  color: #C3C3C3;
 }

+ 13 - 0
frontend/saas-web/app/util/BaseUtil.js

@@ -213,5 +213,18 @@ Ext.define('saas.util.BaseUtil', {
 
             win.show();
         },
+
+        hashcode: function(obj) {
+            let str = JSON.stringify(obj);
+            let hash = 0,
+                i, chr, len;
+            if (str.length === 0) return hash;
+            for (i = 0, len = str.length; i < len; i++) {
+                chr = str.charCodeAt(i);
+                hash = ((hash << 5) - hash) + chr;
+                hash |= 0;
+            }
+            return hash;
+        }
     }
 });

+ 3 - 1
frontend/saas-web/app/view/core/dbfind/DbfindGridPanel.js

@@ -1,7 +1,6 @@
 Ext.define('saas.view.core.dbfind.DbfindGridPanel', {
     extend: 'Ext.grid.Panel',
     xtype: 'dbfindgridpanel',
-    BaseUtil: Ext.create('saas.util.BaseUtil'),
     dataUrl: '',
     dbSearchFields: [],
     condition:'',
@@ -67,6 +66,9 @@ Ext.define('saas.view.core.dbfind.DbfindGridPanel', {
                 dockedItems:[{
                     xtype:'toolbar',
                     dock:'top',
+                    style: {
+                        marginRight: '-8px'
+                    },
                     items:me.getSearchFields().concat([{
                         xtype:'button',
                         text:'查询',

+ 2 - 0
frontend/saas-web/app/view/core/dbfind/DbfindGridPanel.scss

@@ -22,6 +22,7 @@
         content: ' ';
         display: block;
         border-style: solid;
+        border-radius: 4px;
         background-color: #34baf6;
         position: fixed;
         width: 0px;
@@ -33,6 +34,7 @@
     }
     .x-window-body{
         padding-top: 0px !important;
+        background-image: url(get-resource-path('images/default/win-bg-img.png'));
     }
     .x-toolbar-docked-top {
         padding: 6px 0 12px 0px;

+ 86 - 61
frontend/saas-web/app/view/core/report/ReportPanel.js

@@ -34,8 +34,6 @@ Ext.define('saas.view.core.report.ReportPanel', {
 
     initComponent: function () {
         var me = this;
-        var printAble = me.printAble;
-        var exportAble = me.exportAble;
         var store = me.initStore();
         Ext.apply(me, {
             items: [{
@@ -50,66 +48,11 @@ Ext.define('saas.view.core.report.ReportPanel', {
                 },
                 items: me.initSearchItems().concat([{
                     xtype: 'container',
+                    cls: 'button-container',
+                    margin: '0 -2 5 0',
                     columnWidth: me.QueryWidth || 0.5,
-                    items: [{
-                        xtype: 'button',
-                        text: '查询',
-                        handler: 'onQuery',
-                        formBind: true
-                    }, {
-                        xtype: 'button',
-                        text: '打印',
-                        hidden: !printAble,
-                        style: {
-                            float: 'right'
-                        },
-                        handler: 'exportTo',
-                        cfg: {
-                            type: 'html',
-                            includeGroups: true,
-                            includeSummary: true,
-                            isPrint: true
-                        }
-                    }, {
-                        xtype: 'button',
-                        style: {
-                            float: 'right'
-                        },
-                        text: '导出',
-                        hidden: !exportAble,
-                        menu: {
-                            defaults: {
-                                handler: 'exportTo'
-                            },
-                            items: [{
-                                text: 'Excel xlsx',
-                                cfg: {
-                                    type: 'excel',
-                                    ext: 'xlsx'
-                                }
-                            }, {
-                                text: 'Excel xlsx (包含分组合计)',
-                                cfg: {
-                                    type: 'excel',
-                                    ext: 'xlsx',
-                                    includeGroups: true,
-                                    includeSummary: true
-                                }
-                            }, {
-                                text: 'CSV',
-                                cfg: {
-                                    type: 'csv'
-                                }
-                            }, {
-                                text: 'CSV (包含分组合计)',
-                                cfg: {
-                                    type: 'csv',
-                                    includeGroups: true,
-                                    includeSummary: true
-                                }
-                            }]
-                        }
-                    }]
+                    layout: 'hbox',
+                    items: me.getButtons()
                 }])
             }, {
                 xtype: 'grid',
@@ -170,6 +113,88 @@ Ext.define('saas.view.core.report.ReportPanel', {
         }
     },
 
+    getButtons: function() {
+        var me = this,
+        exportAble = me.exportAble,
+        printAble = me.printAble,
+        arr = [{
+            xtype: 'button',
+            text: '查询',
+            handler: 'onQuery',
+            formBind: true
+        }, {
+            flex: 1,
+        }, {
+            xtype: 'button',
+            text: '导出',
+            hidden: !exportAble,
+            cls: 'x-group-btn',
+            menu: {
+                defaults: {
+                    handler: 'exportTo'
+                },
+                items: [{
+                    text: 'Excel xlsx',
+                    cfg: {
+                        type: 'excel',
+                        ext: 'xlsx'
+                    }
+                }, {
+                    text: 'Excel xlsx (包含分组合计)',
+                    cfg: {
+                        type: 'excel',
+                        ext: 'xlsx',
+                        includeGroups: true,
+                        includeSummary: true
+                    }
+                }, {
+                    text: 'CSV',
+                    cfg: {
+                        type: 'csv'
+                    }
+                }, {
+                    text: 'CSV (包含分组合计)',
+                    cfg: {
+                        type: 'csv',
+                        includeGroups: true,
+                        includeSummary: true
+                    }
+                }]
+            }
+        }, {
+            xtype: 'button',
+            text: '打印',
+            hidden: !printAble,
+            cls: 'x-group-btn',
+            handler: 'exportTo',
+            cfg: {
+                type: 'html',
+                includeGroups: true,
+                includeSummary: true,
+                isPrint: true
+            }
+        }],
+        count = {
+            first: -1,
+            last: -1
+        };
+
+        for(let i = 0; i < arr.length; i++) {
+            let a = arr[i];
+            if(a.cls == 'x-group-btn' && !a.hidden) {
+                count.first = count.first == -1 ? i : count.first;
+                count.last = i;
+            }
+        }
+
+        if(count.first != -1) {
+            arr[count.first].cls += ' x-group-btn-first';
+            arr[count.last].cls += ' x-group-btn-last';
+        }
+
+        return arr;
+    },
+
     refreshColumns: function () {
         this.initColumns(Ext.Array.clone(this.reportColumns))
     },

+ 15 - 1
frontend/saas-web/app/view/core/report/ReportPanel.scss

@@ -1,7 +1,21 @@
 $border-color: #999;
 
 .x-report-panel {
-    
+
+    .button-container {
+        .x-group-btn {
+            border-radius: 0 !important;
+            border-right-width: 0;
+        }
+        .x-group-btn-first {
+            border-radius: 2px 0 0 2px !important;
+        }
+        .x-group-btn-last {
+            border-radius: 0 2px 2px 0 !important;
+            border-right-width: 1px;
+        }
+    }
+
     .x-report-grid {
 
         .x-panel-bodyWrap {

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

@@ -83,7 +83,13 @@ Ext.define('saas.view.home.charts.MonthSale', {
                 icon: 'circle',
                 data: fields,
                 itemWidth: 9,
-                itemHeight: 9
+                itemHeight: 9,
+                formatter: function (name) {
+                    var cWidth = Ext.getCmp('month_sale').items.items[0].echarts.getWidth() * 0.3,
+                        dataCount = fields.length,
+                        maxLength = Math.ceil((cWidth / dataCount) / 20);
+                    return name.length > maxLength ? name.substring(0, maxLength) + '...' : name;
+                },
             },
             series: [
                 {

+ 1 - 1
frontend/saas-web/overrides/grid/Panel.scss

@@ -6,7 +6,7 @@
         height: 100%;
         max-height: 200px;
         background: url(/resources/images/grid/empty.png) no-repeat;
-        background-position: center;
+        background-position: center calc(100% - 8px);
     }
     
     .x-grid-empty-text {

BIN
frontend/saas-web/resources/images/default/win-bg-img.png