Merge branch 'dev' of ssh://10.10.100.21/source/saas-platform into dev

frontend/saas-web/app/view/core/base/GridPanel.js

@@ -9,6 +9,13 @@ Ext.define('saas.view.core.base.GridPanel', {
         ignoreRightMouseSelection : false
     },
 
+    requires: [
+        'Ext.grid.plugin.Exporter'
+    ],
+    plugins: {
+        gridexporter: true
+    },
+
     cls:'core-base-gridpanel',
     
     dataUrl: '',
@@ -58,8 +65,8 @@ Ext.define('saas.view.core.base.GridPanel', {
                             condition = "";
                         }
                         Ext.apply(store.proxy.extraParams, {
-                            number: op._page,
-                            size: store.pageSize,
+                            number: store.exportNumber?store.exportNumber:op._page,
+                            size: store.exportPageSize?store.exportPageSize:store.pageSize,
                             condition: JSON.stringify(condition)
                         });
                     }
@@ -155,6 +162,37 @@ Ext.define('saas.view.core.base.GridPanel', {
         this.ownerCt.ownerCt.store.load();
     },
 
+    onExport:function(me){
+        var grid = me.ownerCt.ownerCt;
+        //导出接口权限设置
+        var url = '/api/commons/'+grid.ownerCt.caller+'/export';
+        saas.util.BaseUtil.request({
+            url: url,
+            params: '',
+            method: 'GET',
+        })
+        .then(function(localJson) {
+            if(localJson.success){
+                grid.store.exportPageSize = 5000;
+                grid.store.exportNumber = 1;
+                grid.store.load(function(records, operation, success) {
+                    grid.saveDocumentAs({
+                        type: 'xlsx',
+                        title: grid.ownerCt._title + '列表',
+                        fileName: grid.ownerCt._title + '列表.xlsx'
+                    });
+                    grid.store.exportPageSize = null;
+                    grid.store.exportNumber = null;
+                    grid.store.load(function(records, operation, success) {
+                    });
+                });
+            }
+        })
+        .catch(function(res) {
+            saas.util.BaseUtil.showErrorToast('导出失败: ' + res.message);
+        });
+    },
+
     onVastDeal:function(url,type){
         var form = this.ownerCt;
         var grid = this;

frontend/saas-web/app/view/document/product/BasePanel.js

@@ -57,6 +57,7 @@ Ext.define('saas.view.document.product.BasePanel', {
     }],
 
     //字段属性
+    caller:'Product',
     _formXtype:'document-product-formpanel',
     _title:'物料资料',
     _deleteUrl:'/api/document/product/delete/',

frontend/saas-web/app/view/document/vendor/BasePanel.js

@@ -50,6 +50,7 @@ Ext.define('saas.view.document.vendor.BasePanel', {
     }],
 
     //字段属性
+    caller:'Vendor',
     _formXtype:'document-vendor-formpanel',
     _title:'供应商资料',
     _deleteUrl:'/api/document/vendor/delete/',

frontend/saas-web/app/view/sys/guide/FormPanel.js

@@ -59,28 +59,47 @@ Ext.define('saas.view.sys.guide.FormPanel', {
                 '<tpl for=".">',
 				'<div class="x-guide-panel" align ="center">',
                     '<div class="x-guide-item" align ="center" >',
+
+                        '<figure style="margin: 0 185px 0 180px;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'baseSet\')">',
                         '<img class="',
-                        '<tpl if="!baseSet">x-guide-mask </tpl>',
-                        '" src="resources/images/guide/baseSet.png" style="margin:0 185px 0 0;" align ="center" width="135" height="90" alt="基础设置" onClick="showInformation(\'baseSet\')" >',
+                            '<tpl if="!baseSet">x-guide-mask </tpl>',
+                            '" src="resources/images/guide/baseSet.png" style="background: #d5efff;" align ="center" width="135" height="90" alt="基础设置"  >',
+                        '<figcaption>',
+                        '公司信息、权限和账户管理',
+                        '</figcaption>',
+                        '</figure>',
+                        
+                        '<figure style="margin:0 185px 0 0;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'warehouse\')">',
                         '<img class="',
                         '<tpl if="!warehouse">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/warehouse.png" style="margin:0 185px 0 0;" align ="center" width="135" height="90" alt="仓库资料" onClick="showInformation(\'warehouse\')" >',
+                        '"src="resources/images/guide/warehouse.png" style="background: #d5efff;" align ="center" width="135" height="90" alt="仓库资料"  >',
+                        '<figcaption>',
+                        '仓库信息管理',
+                        '</figcaption>',
+                        '</figure>',
+
+                        '<figure style="margin:0 185px 0 0;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'product\')">',
                         '<img class="',
                         '<tpl if="!product">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/product.png" align ="center" width="135" height="90" alt="物料资料" onClick="showInformation(\'product\')" >',
+                        '"src="resources/images/guide/product.png" style="background: #d5efff;" align ="center" width="135" height="90" alt="物料资料"  >',
+                        '<figcaption>',
+                        '物料信息管理',
+                        '</figcaption>',
+                        '</figure>',
+
                     '</div>',
                     '<div class="x-guide-item" align ="center">',
                         '<img class="',
                         '<tpl if="!baseSet">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/1.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'baseSet\')" >',
+                        '"src="resources/images/guide/1.png" style="position: absolute;margin: -16px 290px 0 -339px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'baseSet\')" >',
                         '<img class="',
                         '<tpl if="!warehouse">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/2.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'warehouse\')" >',
+                        '"src="resources/images/guide/2.png" style="position: absolute;margin: -16px 0 0 -16px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'warehouse\')" >',
                         '<img class="',
                         '<tpl if="!product">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/3.png" style="margin: -20px 0px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'product\')" >',
+                        '"src="resources/images/guide/3.png" style="position: absolute;margin: -16px 0 0 305px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'product\')" >',
                     '</div>',
-                    '<div class="x-guide-item" align ="center">',
+                    '<div class="x-guide-item" style="margin-top: 20px;" align ="center">',
                         '<span  style="margin:0 270px 0px 0;" align ="center" onClick="showInformation(\'baseSet\')" >基础设置</span>',
                         '<span  style="margin:0 270px 0px 0;" align ="center" onClick="showInformation(\'warehouse\')" >仓库资料</span>',
                         '<span  style="margin:0 0px 0px 0;" align ="center"  onClick="showInformation(\'product\')" >物料资料</span>',
@@ -99,28 +118,47 @@ Ext.define('saas.view.sys.guide.FormPanel', {
                         '<div class="x-guide-line"  height="1"  style="border:1px solid #E4F7FF;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                     '</div>',
                     '<div class="x-guide-item" align ="center">',
+
+                        '<figure style="margin: 40px 185px 0 182px;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'customer\')">',
                         '<img class="',
                         '<tpl if="!customer">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/customer.png" style="margin:50px 185px 0 0;" align ="center" width="135" height="90" alt="客户资料" onClick="showInformation(\'customer\')" >',
+                        '"src="resources/images/guide/customer.png" style="background: #ffffff;" align ="center" width="135" height="90" alt="客户资料"  >',
+                        '<figcaption>',
+                        '客户信息管理',
+                        '</figcaption>',
+                        '</figure>',
+
+                        '<figure style="margin: 0px 185px 0 0px;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'vendor\')">',
                         '<img class="',
                         '<tpl if="!vendor">x-guide-mask </tpl>',
-                        '"src="resources/images/guide/vendor.png" style="margin:50px 185px 0 0;" align ="center" width="135" height="90" alt="供应商资料" onClick="showInformation(\'vendor\')" >',
+                        '"src="resources/images/guide/vendor.png" style="background: #ffffff;" align ="center" width="135" height="90" alt="供应商资料"  >',
+                        '<figcaption>',
+                        '供应商信息管理',
+                        '</figcaption>',
+                        '</figure>',
+
+                        '<figure style="margin: 0 185px 0 0px;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'begin\',\'{begin}\')">',
                         '<img class="',
                         '<tpl if="!begin">x-guide-mask </tpl>',
-                        '" src="resources/images/guide/begin.png" style="margin:50px 0 0 0;" align ="center" width="135" height="90" alt="开始使用" onClick="showInformation(\'begin\',\'{begin}\')" >',
+                        '" src="resources/images/guide/begin.png" style="background: #ffffff;" align ="center" width="135" height="90" alt="开始使用"  >',
+                        '<figcaption>',
+                        '开启云进销存',
+                        '</figcaption>',
+                        '</figure>',
+
                     '</div>',
                     '<div class="x-guide-item" align ="center">',
                         '<img class="',
                         '<tpl if="!customer">x-guide-mask </tpl>',
-                        '" src="resources/images/guide/4.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'customer\')" >',
+                        '" src="resources/images/guide/4.png" style="position: absolute;margin: -16px 290px 0 -339px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'customer\')" >',
                         '<img class="',
                         '<tpl if="!vendor">x-guide-mask </tpl>',
-                        '" src="resources/images/guide/5.png" style="margin: -20px 290px 0 0;" align ="center" width="32" height="32"  onClick="showInformation(\'vendor\')">',
+                        '" src="resources/images/guide/5.png" style="position: absolute;margin: -16px 0 0 -16px;z-index: 100;" align ="center" width="32" height="32"  onClick="showInformation(\'vendor\')">',
                         '<img class="',
                         '<tpl if="!begin">x-guide-mask </tpl>',
-                        '" src="resources/images/guide/6.png" style="margin: -20px 0px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'begin\',\'{begin}\')" >',
+                        '" src="resources/images/guide/6.png" style="position: absolute;margin: -16px 0 0 305px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'begin\',\'{begin}\')" >',
                     '</div>',
-                    '<div class="x-guide-item" align ="center">',
+                    '<div class="x-guide-item" style="margin-top: 20px;" align ="center">',
                         '<span  style="margin:0 265px 100px 0;" align ="center"  onClick="showInformation(\'customer\')" >客户资料</span>',
                         '<span  style="margin:0 265px 100px 0;" align ="center" onClick="showInformation(\'vendor\')" >供应商资料</span>',
                         '<span  style="margin:0 0px 100px 0;" align ="center" onClick="showInformation(\'begin\',\'{begin}\')"  >开始使用</span>',

frontend/saas-web/ext/packages/css/imagehover.css

@@ -0,0 +1,977 @@
+/*
+ * ImageHover.css - http://www.imagehover.io
+ * Version 1.0
+ * Author: Ciarán Walsh
+
+ * Made available under a MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+
+ */
+[class^='imghvr-'],
+[class*=' imghvr-'] {
+  position: relative;
+  display: inline-block;
+  margin: 0px;
+  max-width: 100%;
+  background-color: rgb(52, 186, 246);
+  color: #fff;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+[class^='imghvr-'] > img,
+[class*=' imghvr-'] > img {
+  vertical-align: top;
+  max-width: 100%;
+}
+[class^='imghvr-'] figcaption,
+[class*=' imghvr-'] figcaption {
+  background-color: inherit;
+  padding: 30px 20px 10px 20px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+[class^='imghvr-'] h3,
+[class*=' imghvr-'] h3,
+[class^='imghvr-'] p,
+[class*=' imghvr-'] p {
+  margin: 0;
+  padding: 0;
+  color: #fff;
+}
+[class^='imghvr-'] a,
+[class*=' imghvr-'] a {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+[class^='imghvr-'],
+[class*=' imghvr-'],
+[class^='imghvr-']:before,
+[class^='imghvr-']:after,
+[class*=' imghvr-']:before,
+[class*=' imghvr-']:after,
+[class^='imghvr-'] *,
+[class*=' imghvr-'] *,
+[class^='imghvr-'] *:before,
+[class^='imghvr-'] *:after,
+[class*=' imghvr-'] *:before,
+[class*=' imghvr-'] *:after {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: all 0.35s ease;
+  transition: all 0.35s ease;
+}
+/* imghvr-fade
+   ----------------------------- */
+.imghvr-fade figcaption {
+  opacity: 0;
+}
+.imghvr-fade:hover > img {
+  opacity: 0;
+}
+.imghvr-fade:hover figcaption {
+  opacity: 1;
+}
+/* imghvr-push-*
+   ----------------------------- */
+[class^='imghvr-push-']:hover figcaption,
+[class*=' imghvr-push-']:hover figcaption {
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+/* imghvr-push-up
+   ----------------------------- */
+.imghvr-push-up figcaption {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+}
+.imghvr-push-up:hover > img {
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+/* imghvr-push-down
+   ----------------------------- */
+.imghvr-push-down figcaption {
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.imghvr-push-down:hover > img {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+}
+/* imghvr-push-left
+   ----------------------------- */
+.imghvr-push-left figcaption {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+.imghvr-push-left:hover > img {
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+/* imghvr-push--right
+   ----------------------------- */
+.imghvr-push-right figcaption {
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+.imghvr-push-right:hover > img {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+/* imghvr-slide-*
+   ----------------------------- */
+[class^='imghvr-slide-']:hover figcaption,
+[class*=' imghvr-slide-']:hover figcaption {
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+/* imghvr-slide-up
+   ----------------------------- */
+.imghvr-slide-up figcaption {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+  background-color: inherit;
+}
+/* imghvr-slide-down
+   ----------------------------- */
+.imghvr-slide-down figcaption {
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+  background-color: inherit;
+}
+/* imghvr-slide-left
+   ----------------------------- */
+.imghvr-slide-left figcaption {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+  background-color: inherit;
+}
+/* imghvr-slide-right
+   ----------------------------- */
+.imghvr-slide-right figcaption {
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+/* imghvr-reveal-*
+   ----------------------------- */
+[class^='imghvr-reveal-']:before,
+[class*=' imghvr-reveal-']:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: '';
+  background-color: inherit;
+}
+[class^='imghvr-reveal-'] figcaption,
+[class*=' imghvr-reveal-'] figcaption {
+  opacity: 0;
+}
+[class^='imghvr-reveal-']:hover:before,
+[class*=' imghvr-reveal-']:hover:before {
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+}
+[class^='imghvr-reveal-']:hover figcaption,
+[class*=' imghvr-reveal-']:hover figcaption {
+  opacity: 1;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+/* imghvr-reveal-up
+   ----------------------------- */
+.imghvr-reveal-up:before {
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+}
+/* imghvr-reveal-down
+   ----------------------------- */
+.imghvr-reveal-down:before {
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+/* imghvr-reveal-left
+   ----------------------------- */
+.imghvr-reveal-left:before {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+/* imghvr-reveal-right
+   ----------------------------- */
+.imghvr-reveal-right:before {
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+/* imghvr-hinge-*
+   ----------------------------- */
+[class^='imghvr-hinge-'],
+[class*=' imghvr-hinge-'] {
+  -webkit-perspective: 50em;
+  perspective: 50em;
+}
+[class^='imghvr-hinge-'] figcaption,
+[class*=' imghvr-hinge-'] figcaption {
+  opacity: 0;
+  z-index: 1;
+}
+[class^='imghvr-hinge-']:hover img,
+[class*=' imghvr-hinge-']:hover img {
+  opacity: 0;
+}
+[class^='imghvr-hinge-']:hover figcaption,
+[class*=' imghvr-hinge-']:hover figcaption {
+  opacity: 1;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+/* imghvr-hinge-up
+   ----------------------------- */
+.imghvr-hinge-up img {
+  -webkit-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+.imghvr-hinge-up figcaption {
+  -webkit-transform: rotateX(90deg);
+  transform: rotateX(90deg);
+  -webkit-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.imghvr-hinge-up:hover > img {
+  -webkit-transform: rotateX(-90deg);
+  transform: rotateX(-90deg);
+}
+.imghvr-hinge-up:hover figcaption {
+  -webkit-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+/* imghvr-hinge-down
+   ----------------------------- */
+.imghvr-hinge-down img {
+  -webkit-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.imghvr-hinge-down figcaption {
+  -webkit-transform: rotateX(-90deg);
+  transform: rotateX(-90deg);
+  -webkit-transform-origin: 50% -50%;
+  -ms-transform-origin: 50% -50%;
+  transform-origin: 50% -50%;
+}
+.imghvr-hinge-down:hover > img {
+  -webkit-transform: rotateX(90deg);
+  transform: rotateX(90deg);
+  opacity: 0;
+}
+.imghvr-hinge-down:hover figcaption {
+  -webkit-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+/* imghvr-hinge-left
+   ----------------------------- */
+.imghvr-hinge-left img {
+  -webkit-transform-origin: 0% 50%;
+  -ms-transform-origin: 0% 50%;
+  transform-origin: 0% 50%;
+}
+.imghvr-hinge-left figcaption {
+  -webkit-transform: rotateY(-90deg);
+  transform: rotateY(-90deg);
+  -webkit-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+}
+.imghvr-hinge-left:hover > img {
+  -webkit-transform: rotateY(90deg);
+  transform: rotateY(90deg);
+}
+.imghvr-hinge-left:hover figcaption {
+  -webkit-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+/* imghvr-hinge-right
+   ----------------------------- */
+.imghvr-hinge-right img {
+  -webkit-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+}
+.imghvr-hinge-right figcaption {
+  -webkit-transform: rotateY(90deg);
+  transform: rotateY(90deg);
+  -webkit-transform-origin: 0 50%;
+  -ms-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+}
+.imghvr-hinge-right:hover > img {
+  -webkit-transform: rotateY(-90deg);
+  transform: rotateY(-90deg);
+}
+.imghvr-hinge-right:hover figcaption {
+  -webkit-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+/* imghvr-flip-*
+   ----------------------------- */
+[class^='imghvr-flip-'],
+[class*=' imghvr-flip-'] {
+  -webkit-perspective: 50em;
+  perspective: 50em;
+}
+[class^='imghvr-flip-'] img,
+[class*=' imghvr-flip-'] img {
+  backface-visibility: hidden;
+}
+[class^='imghvr-flip-'] figcaption,
+[class*=' imghvr-flip-'] figcaption {
+  opacity: 0;
+}
+[class^='imghvr-flip-']:hover > img,
+[class*=' imghvr-flip-']:hover > img {
+  opacity: 0;
+}
+[class^='imghvr-flip-']:hover figcaption,
+[class*=' imghvr-flip-']:hover figcaption {
+  opacity: 1;
+  -webkit-transition-delay: 0.15s;
+  transition-delay: 0.15s;
+}
+/* imghvr-flip-horiz
+   ----------------------------- */
+.imghvr-flip-horiz figcaption {
+  -webkit-transform: rotateX(90deg);
+  transform: rotateX(90deg);
+  -webkit-transform-origin: 0% 50%;
+  -ms-transform-origin: 0% 50%;
+  transform-origin: 0% 50%;
+}
+.imghvr-flip-horiz:hover img {
+  -webkit-transform: rotateX(-180deg);
+  transform: rotateX(-180deg);
+}
+.imghvr-flip-horiz:hover figcaption {
+  -webkit-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+/* imghvr-flip-vert
+   ----------------------------- */
+.imghvr-flip-vert figcaption {
+  -webkit-transform: rotateY(90deg);
+  transform: rotateY(90deg);
+  -webkit-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+.imghvr-flip-vert:hover > img {
+  -webkit-transform: rotateY(-180deg);
+  transform: rotateY(-180deg);
+}
+.imghvr-flip-vert:hover figcaption {
+  -webkit-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+/* imghvr-flip-diag-1
+   ----------------------------- */
+.imghvr-flip-diag-1 figcaption {
+  -webkit-transform: rotate3d(1, -1, 0, 100deg);
+  transform: rotate3d(1, -1, 0, 100deg);
+}
+.imghvr-flip-diag-1:hover > img {
+  -webkit-transform: rotate3d(-1, 1, 0, 100deg);
+  transform: rotate3d(-1, 1, 0, 100deg);
+}
+.imghvr-flip-diag-1:hover figcaption {
+  -webkit-transform: rotate3d(0, 0, 0, 0deg);
+  transform: rotate3d(0, 0, 0, 0deg);
+}
+/* imghvr-flip-diag-2
+   ----------------------------- */
+.imghvr-flip-diag-2 figcaption {
+  -webkit-transform: rotate3d(1, 1, 0, 100deg);
+  transform: rotate3d(1, 1, 0, 100deg);
+}
+.imghvr-flip-diag-2:hover > img {
+  -webkit-transform: rotate3d(-1, -1, 0, 100deg);
+  transform: rotate3d(-1, -1, 0, 100deg);
+}
+.imghvr-flip-diag-2:hover figcaption {
+  -webkit-transform: rotate3d(0, 0, 0, 0deg);
+  transform: rotate3d(0, 0, 0, 0deg);
+}
+/* imghvr-shutter-out-*
+   ----------------------------- */
+[class^='imghvr-shutter-out-']:before,
+[class*=' imghvr-shutter-out-']:before {
+  background: inherit;
+  position: absolute;
+  content: '';
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+}
+[class^='imghvr-shutter-out-'] figcaption,
+[class*=' imghvr-shutter-out-'] figcaption {
+  opacity: 0;
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+[class^='imghvr-shutter-out-']:hover:before,
+[class*=' imghvr-shutter-out-']:hover:before {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+}
+[class^='imghvr-shutter-out-']:hover figcaption,
+[class*=' imghvr-shutter-out-']:hover figcaption {
+  opacity: 1;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+}
+/* imghvr-shutter-out-horiz
+   ----------------------------- */
+.imghvr-shutter-out-horiz:before {
+  left: 50%;
+  right: 50%;
+  top: 0;
+  bottom: 0;
+}
+.imghvr-shutter-out-horiz:hover:before {
+  left: 0;
+  right: 0;
+}
+/* imghvr-shutter-out-vert
+   ----------------------------- */
+.imghvr-shutter-out-vert:before {
+  top: 50%;
+  bottom: 50%;
+  left: 0;
+  right: 0;
+}
+.imghvr-shutter-out-vert:hover:before {
+  top: 0;
+  bottom: 0;
+}
+/* imghvr-shutter-out-diag-1
+   ----------------------------- */
+.imghvr-shutter-out-diag-1:before {
+  top: 50%;
+  bottom: 50%;
+  left: -35%;
+  right: -35%;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.imghvr-shutter-out-diag-1:hover:before {
+  top: -35%;
+  bottom: -35%;
+}
+/* imghvr-shutter-out-diag-2
+   ----------------------------- */
+.imghvr-shutter-out-diag-2:before {
+  top: 50%;
+  bottom: 50%;
+  left: -35%;
+  right: -35%;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+.imghvr-shutter-out-diag-2:hover:before {
+  top: -35%;
+  bottom: -35%;
+}
+/* imghvr-shutter-in-*
+   ----------------------------- */
+[class^='imghvr-shutter-in-']:after,
+[class*=' imghvr-shutter-in-']:after,
+[class^='imghvr-shutter-in-']:before,
+[class*=' imghvr-shutter-in-']:before {
+  background: inherit;
+  position: absolute;
+  content: '';
+}
+[class^='imghvr-shutter-in-']:after,
+[class*=' imghvr-shutter-in-']:after {
+  top: 0;
+  left: 0;
+}
+[class^='imghvr-shutter-in-']:before,
+[class*=' imghvr-shutter-in-']:before {
+  right: 0;
+  bottom: 0;
+}
+[class^='imghvr-shutter-in-'] figcaption,
+[class*=' imghvr-shutter-in-'] figcaption {
+  opacity: 0;
+  z-index: 1;
+}
+[class^='imghvr-shutter-in-']:hover figcaption,
+[class*=' imghvr-shutter-in-']:hover figcaption {
+  opacity: 1;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+/* imghvr-shutter-in-horiz
+   ----------------------------- */
+.imghvr-shutter-in-horiz:after,
+.imghvr-shutter-in-horiz:before {
+  width: 0;
+  height: 100%;
+}
+.imghvr-shutter-in-horiz:hover:after,
+.imghvr-shutter-in-horiz:hover:before {
+  width: 50%;
+}
+/* imghvr-shutter-in-vert
+   ----------------------------- */
+.imghvr-shutter-in-vert:after,
+.imghvr-shutter-in-vert:before {
+  height: 0;
+  width: 100%;
+}
+.imghvr-shutter-in-vert:hover:after,
+.imghvr-shutter-in-vert:hover:before {
+  height: 50%;
+}
+/* imghvr-shutter-in-out-horiz
+   ----------------------------- */
+.imghvr-shutter-in-out-horiz:after,
+.imghvr-shutter-in-out-horiz:before {
+  width: 0;
+  height: 100%;
+}
+.imghvr-shutter-in-out-horiz:hover:after,
+.imghvr-shutter-in-out-horiz:hover:before {
+  width: 100%;
+}
+/* imghvr-shutter-in-out-vert
+   ----------------------------- */
+.imghvr-shutter-in-out-vert:after,
+.imghvr-shutter-in-out-vert:before {
+  height: 0;
+  width: 100%;
+}
+.imghvr-shutter-in-out-vert:hover:after,
+.imghvr-shutter-in-out-vert:hover:before {
+  height: 100%;
+}
+/* imghvr-shutter-in-out-diag-1
+   ----------------------------- */
+.imghvr-shutter-in-out-diag-1:after,
+.imghvr-shutter-in-out-diag-1:before {
+  width: 200%;
+  height: 200%;
+  -webkit-transition: all 0.6s ease;
+  transition: all 0.6s ease;
+}
+.imghvr-shutter-in-out-diag-1:after {
+  -webkit-transform: skew(-45deg) translateX(-150%);
+  transform: skew(-45deg) translateX(-150%);
+}
+.imghvr-shutter-in-out-diag-1:before {
+  -webkit-transform: skew(-45deg) translateX(150%);
+  transform: skew(-45deg) translateX(150%);
+}
+.imghvr-shutter-in-out-diag-1:hover:after {
+  -webkit-transform: skew(-45deg) translateX(-50%);
+  transform: skew(-45deg) translateX(-50%);
+}
+.imghvr-shutter-in-out-diag-1:hover:before {
+  -webkit-transform: skew(-45deg) translateX(50%);
+  transform: skew(-45deg) translateX(50%);
+}
+/* imghvr-shutter-in-out-diag-2
+   ----------------------------- */
+.imghvr-shutter-in-out-diag-2:after,
+.imghvr-shutter-in-out-diag-2:before {
+  width: 200%;
+  height: 200%;
+  -webkit-transition: all 0.6s ease;
+  transition: all 0.6s ease;
+}
+.imghvr-shutter-in-out-diag-2:after {
+  -webkit-transform: skew(45deg) translateX(-100%);
+  transform: skew(45deg) translateX(-100%);
+}
+.imghvr-shutter-in-out-diag-2:before {
+  -webkit-transform: skew(45deg) translateX(100%);
+  transform: skew(45deg) translateX(100%);
+}
+.imghvr-shutter-in-out-diag-2:hover:after {
+  -webkit-transform: skew(45deg) translateX(0%);
+  transform: skew(45deg) translateX(0%);
+}
+.imghvr-shutter-in-out-diag-2:hover:before {
+  -webkit-transform: skew(45deg) translateX(0%);
+  transform: skew(45deg) translateX(0%);
+}
+/* imghvr-fold*
+   ----------------------------- */
+[class^='imghvr-fold'],
+[class*=' imghvr-fold'] {
+  -webkit-perspective: 50em;
+  perspective: 50em;
+}
+[class^='imghvr-fold'] img,
+[class*=' imghvr-fold'] img {
+  -webkit-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+[class^='imghvr-fold'] figcaption,
+[class*=' imghvr-fold'] figcaption {
+  z-index: 1;
+  opacity: 0;
+}
+[class^='imghvr-fold']:hover > img,
+[class*=' imghvr-fold']:hover > img {
+  opacity: 0;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+}
+[class^='imghvr-fold']:hover figcaption,
+[class*=' imghvr-fold']:hover figcaption {
+  -webkit-transform: rotateX(0deg) translate3d(0, 0%, 0) scale(1);
+  transform: rotateX(0deg) translate3d(0, 0%, 0) scale(1);
+  opacity: 1;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}
+/* imghvr-fold-up
+   ----------------------------- */
+.imghvr-fold-up > img {
+  -webkit-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+.imghvr-fold-up figcaption {
+  -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
+  transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
+  -webkit-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.imghvr-fold-up:hover > img {
+  -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%);
+  transform: rotateX(90deg) scale(0.6) translateY(50%);
+}
+/* imghvr-fold-down
+   ----------------------------- */
+.imghvr-fold-down > img {
+  -webkit-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.imghvr-fold-down figcaption {
+  -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
+  transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
+  -webkit-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+.imghvr-fold-down:hover > img {
+  -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
+  transform: rotateX(-90deg) scale(0.6) translateY(-50%);
+}
+/* imghvr-fold-left
+   ----------------------------- */
+.imghvr-fold-left > img {
+  -webkit-transform-origin: 0% 50%;
+  -ms-transform-origin: 0% 50%;
+  transform-origin: 0% 50%;
+}
+.imghvr-fold-left figcaption {
+  -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
+  transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
+  -webkit-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+}
+.imghvr-fold-left:hover > img {
+  -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%);
+  transform: rotateY(-90deg) scale(0.6) translateX(50%);
+}
+/* imghvr-fold-right
+   ----------------------------- */
+.imghvr-fold-right {
+  -webkit-perspective: 50em;
+  perspective: 50em;
+}
+.imghvr-fold-right > img {
+  -webkit-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+}
+.imghvr-fold-right figcaption {
+  -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
+  transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
+  -webkit-transform-origin: 0 50%;
+  -ms-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+}
+.imghvr-fold-right:hover > img {
+  -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%);
+  transform: rotateY(90deg) scale(0.6) translateX(-50%);
+}
+/* imghvr-zoom-in
+   ----------------------------- */
+.imghvr-zoom-in figcaption {
+  opacity: 0;
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+}
+.imghvr-zoom-in:hover figcaption {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  opacity: 1;
+}
+/* imghvr-zoom-out*
+   ----------------------------- */
+[class^='imghvr-zoom-out'] figcaption,
+[class*=' imghvr-zoom-out'] figcaption {
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  -webkit-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  opacity: 0;
+}
+[class^='imghvr-zoom-out']:hover figcaption,
+[class*=' imghvr-zoom-out']:hover figcaption,
+[class^='imghvr-zoom-out'].hover figcaption,
+[class*=' imghvr-zoom-out'].hover figcaption {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  opacity: 1;
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+/* imghvr-zoom-out
+   ----------------------------- */
+.imghvr-zoom-out:hover > img {
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  opacity: 0;
+}
+/* imghvr-zoom-out-up
+   ----------------------------- */
+.imghvr-zoom-out-up:hover > img,
+.imghvr-zoom-out-up.hover > img {
+  -webkit-animation: imghvr-zoom-out-up 0.4s linear;
+  animation: imghvr-zoom-out-up 0.4s linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+@-webkit-keyframes imghvr-zoom-out-up {
+  50% {
+    -webkit-transform: scale(0.8) translateY(0%);
+    transform: scale(0.8) translateY(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateY(-150%);
+    transform: scale(0.8) translateY(-150%);
+    opacity: 0.5;
+  }
+}
+@keyframes imghvr-zoom-out-up {
+  50% {
+    -webkit-transform: scale(0.8) translateY(0%);
+    transform: scale(0.8) translateY(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateY(-150%);
+    transform: scale(0.8) translateY(-150%);
+    opacity: 0.5;
+  }
+}
+/* imghvr-zoom-out-down
+   ----------------------------- */
+.imghvr-zoom-out-down:hover > img,
+.imghvr-zoom-out-down.hover > img {
+  -webkit-animation: imghvr-zoom-out-down 0.4s linear;
+  animation: imghvr-zoom-out-down 0.4s linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+@-webkit-keyframes imghvr-zoom-out-down {
+  50% {
+    -webkit-transform: scale(0.8) translateY(0%);
+    transform: scale(0.8) translateY(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateY(150%);
+    transform: scale(0.8) translateY(150%);
+    opacity: 0.5;
+  }
+}
+@keyframes imghvr-zoom-out-down {
+  50% {
+    -webkit-transform: scale(0.8) translateY(0%);
+    transform: scale(0.8) translateY(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateY(150%);
+    transform: scale(0.8) translateY(150%);
+    opacity: 0.5;
+  }
+}
+/* imghvr-zoom-out-left
+   ----------------------------- */
+.imghvr-zoom-out-left:hover > img,
+.imghvr-zoom-out-left.hover > img {
+  -webkit-animation: imghvr-zoom-out-left 0.4s linear;
+  animation: imghvr-zoom-out-left 0.4s linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+@-webkit-keyframes imghvr-zoom-out-left {
+  50% {
+    -webkit-transform: scale(0.8) translateX(0%);
+    transform: scale(0.8) translateX(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateX(-150%);
+    transform: scale(0.8) translateX(-150%);
+    opacity: 0.5;
+  }
+}
+@keyframes imghvr-zoom-out-left {
+  50% {
+    -webkit-transform: scale(0.8) translateX(0%);
+    transform: scale(0.8) translateX(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateX(-150%);
+    transform: scale(0.8) translateX(-150%);
+    opacity: 0.5;
+  }
+}
+/* imghvr-zoom-out-right
+   ----------------------------- */
+.imghvr-zoom-out-right:hover > img,
+.imghvr-zoom-out-right.hover > img {
+  -webkit-animation: imghvr-zoom-out-right 0.4s linear;
+  animation: imghvr-zoom-out-right 0.4s linear;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+@-webkit-keyframes imghvr-zoom-out-right {
+  50% {
+    -webkit-transform: scale(0.8) translateX(0%);
+    transform: scale(0.8) translateX(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateX(150%);
+    transform: scale(0.8) translateX(150%);
+    opacity: 0.5;
+  }
+}
+@keyframes imghvr-zoom-out-right {
+  50% {
+    -webkit-transform: scale(0.8) translateX(0%);
+    transform: scale(0.8) translateX(0%);
+    opacity: 0.5;
+  }
+  100% {
+    -webkit-transform: scale(0.8) translateX(150%);
+    transform: scale(0.8) translateX(150%);
+    opacity: 0.5;
+  }
+}
+/* imghvr-zoom-out-flip-horiz
+   ----------------------------- */
+.imghvr-zoom-out-flip-horiz {
+  -webkit-perspective: 50em;
+  perspective: 50em;
+}
+.imghvr-zoom-out-flip-horiz figcaption {
+  opacity: 0;
+  -webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5);
+  transform: rotateX(90deg) translateY(-100%) scale(0.5);
+}
+.imghvr-zoom-out-flip-horiz:hover > img,
+.imghvr-zoom-out-flip-horiz.hover > img {
+  -webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5);
+  transform: rotateX(-100deg) translateY(50%) scale(0.5);
+  opacity: 0;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+}
+.imghvr-zoom-out-flip-horiz:hover figcaption,
+.imghvr-zoom-out-flip-horiz.hover figcaption {
+  -webkit-transform: rotateX(0deg) translateY(0%) scale(1);
+  transform: rotateX(0deg) translateY(0%) scale(1);
+  opacity: 1;
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+/* imghvr-zoom-out-flip-vert
+   ----------------------------- */
+.imghvr-zoom-out-flip-vert {
+  -webkit-perspective: 50em;
+  perspective: 50em;
+}
+.imghvr-zoom-out-flip-vert figcaption {
+  opacity: 0;
+  -webkit-transform: rotateY(90deg) translate(50%, 0px) scale(0.5);
+  transform: rotateY(90deg) translate(50%, 0px) scale(0.5);
+}
+.imghvr-zoom-out-flip-vert:hover > img,
+.imghvr-zoom-out-flip-vert.hover > img {
+  -webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5);
+  transform: rotateY(-100deg) translateX(50%) scale(0.5);
+  opacity: 0;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+}
+.imghvr-zoom-out-flip-vert:hover figcaption,
+.imghvr-zoom-out-flip-vert.hover figcaption {
+  -webkit-transform: rotateY(0deg) translate(0px, 0px) scale(1);
+  transform: rotateY(0deg) translate(0px, 0px) scale(1);
+  opacity: 1;
+  -webkit-transition-delay: 0.3s;
+  transition-delay: 0.3s;
+}
+/* imghvr-blur
+   ----------------------------- */
+.imghvr-blur figcaption {
+  opacity: 0;
+}
+.imghvr-blur:hover > img {
+  -webkit-filter: blur(30px);
+  filter: blur(30px);
+  -webkit-transform: scale(1.2);
+  transform: scale(1.2);
+  opacity: 0;
+}
+.imghvr-blur:hover figcaption {
+  opacity: 1;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
+}

frontend/saas-web/index.html

@@ -7,10 +7,11 @@
 
     <title>云进销存 - 优企云服</title>
     <link rel="icon" href="/resources/images/favicon.png" type="image/x-icon">
+    <!-- 图片动画效果样式导入 -->
+    <link type="text/css" rel="stylesheet" href="/ext/packages/css/imagehover.css" />
 
     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
     <script id="microloader" data-app="a20e1670-7932-41f6-8e9c-55b77cba3f26" type="text/javascript" src="bootstrap.js"></script>
-
 </head>
 <body class="launching"></body>
 </html>