Merge remote-tracking branch 'origin/dev' into dev

README.md

@@ -107,7 +107,7 @@
 
 > 构建
 
-* [jenkins](http://192.168.253.3:8080/job/saas) **账号** admin **密码** select123***
+* [jenkins](http://192.168.0.181:8080/job/saas) **账号** admin **密码** select123***
 
 > 日志
 

applications/commons/commons-dto/src/main/java/com/usoftchina/saas/commons/dto/ListReqDTO.java

@@ -18,6 +18,55 @@ public class ListReqDTO implements Serializable {
      */
     private String mode;
 
+    private String calculateFields;
+
+    //将列拼成查询语句，直接查询出数据的格式为json
+    public String getCalculateFieldsSql() {
+        try {
+            JSONArray jsonArray = JSONArray.parseArray(this.calculateFields);
+            if (null != jsonArray && jsonArray.size() > 0) {
+                StringBuilder fieldsSql = new StringBuilder();
+                StringBuilder fieldSql = null;
+                Object field = null;
+                Object operation = null;
+                String sql = null;
+                for (int i = 0; i < jsonArray.size(); i++) {
+                    JSONObject obj = (JSONObject) jsonArray.get(i);
+                    field = obj.get("field");
+                    operation = obj.get("operation");
+                    if (null != field && null != operation && !"".equals(field) && !"".equals(operation)) {
+                        fieldSql = new StringBuilder("'{");
+                        fieldSql.append("\"" + field + "\":'");
+                        fieldSql.append(",");
+                        fieldSql.append(operation + "(" + field + ")");
+                        fieldSql.append(",");
+                        fieldSql.append("',\"operation\":\"" + operation + "\"");
+                        fieldSql.append("}'");
+                    }
+                    if (null != fieldSql) {
+                        fieldsSql.append(fieldSql + ",\",\",");
+                    }
+                }
+                if (fieldsSql.length() > 0) {
+                    sql = "concat('['," + fieldsSql.substring(0, fieldsSql.length() - 5) + ",']')";
+                }
+                return sql;
+            }
+            return null;
+        } catch (Exception e) {
+            e.printStackTrace();
+            return null;
+        }
+    }
+
+    public String getCalculateFields() {
+        return calculateFields;
+    }
+
+    public void setCalculateFields(String calculateFields) {
+        this.calculateFields = calculateFields;
+    }
+
     public String getCondition() {
         return condition;
     }
@@ -87,7 +136,7 @@ public class ListReqDTO implements Serializable {
         }catch (Exception e){
             return null;
         }
-
     }
+
 }
 

applications/document/document-server/src/main/resources/application.yml

@@ -20,6 +20,9 @@ spring:
       connection-timeout: 30000
   messages:
     basename: i18n/messages
+  redis:
+    host: 192.168.253.12
+    port: 6379
   rabbitmq:
     host: 192.168.0.176
     port: 5672

applications/money/money-server/src/main/resources/application.yml

@@ -18,6 +18,9 @@ spring:
       connection-timeout: 30000
   messages:
     basename: i18n/messages
+  redis:
+    host: 192.168.253.12
+    port: 6379
   rabbitmq:
     host: 192.168.0.176
     port: 5672

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/controller/SaleReportController.java

@@ -10,6 +10,8 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.util.Map;
+
 /**
  * @author: guq
  * @create: 2018-11-09 11:23
@@ -23,13 +25,19 @@ public class SaleReportController {
 
     @GetMapping("/saleProfit")
     public Result SaleProfit(PageRequest page, ListReqDTO req) {
-        PageInfo listData = saleReportService.getSaleProfitData(page, req);
+        Map<String, Object> listData = saleReportService.getSaleProfitData(page, req);
         return Result.success(listData);
     }
 
     @GetMapping("/saleRec")
     public Result SaleRec(PageRequest page, ListReqDTO req) {
-        PageInfo listData = saleReportService.getSaleRecData(page, req);
+        Map<String, Object> listData = saleReportService.getSaleRecData(page, req);
+        return Result.success(listData);
+    }
+
+    @GetMapping("/saleDetail")
+    public Result saleDetail(PageRequest page, ListReqDTO req) {
+        Map<String, Object> listData = saleReportService.getSaleDetail(page, req);
         return Result.success(listData);
     }
 

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/mapper/SaleListMapper.java

@@ -12,4 +12,6 @@ public interface SaleListMapper {
 
     List<SaleList> selectSaleByCondition(@Param("con") String con, @Param("companyId") Long companyId);
 
+    String selectCalculateFields(@Param("fields") String fields, @Param("con") String con, @Param("companyId") Long companyId);
+
 }

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/mapper/SaleProfitViewMapper.java

@@ -8,4 +8,6 @@ import java.util.List;
 public interface SaleProfitViewMapper {
 
     List<SaleProfitView> selectByCondition(@Param("con") String con, @Param("companyId") Long companyId);
+
+    String selectCalculateFields(@Param("fields") String fields, @Param("con") String con, @Param("companyId") Long companyId);
 }

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/mapper/SalerecViewMapper.java

@@ -8,4 +8,6 @@ import java.util.List;
 public interface SalerecViewMapper {
 
     List<SalerecView> selectByCondition(@Param("con") String con, @Param("companyId") Long companyId);
+
+    String selectCalculateFields(@Param("fields") String fields, @Param("con") String con, @Param("companyId") Long companyId);
 }

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/service/SaleReportService.java

@@ -1,12 +1,14 @@
 package com.usoftchina.saas.sale.service;
 
-import com.github.pagehelper.PageInfo;
 import com.usoftchina.saas.commons.dto.ListReqDTO;
 import com.usoftchina.saas.page.PageRequest;
-import com.usoftchina.saas.sale.po.report.SalerecView;
+
+import java.util.Map;
 
 public interface SaleReportService {
-    PageInfo getSaleProfitData(PageRequest page, ListReqDTO req);
+    Map<String, Object> getSaleProfitData(PageRequest page, ListReqDTO req);
+
+    Map<String, Object> getSaleRecData(PageRequest page, ListReqDTO req);
 
-    PageInfo getSaleRecData(PageRequest page, ListReqDTO req);
+    Map<String, Object> getSaleDetail(PageRequest page, ListReqDTO req);
 }

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/service/impl/ProdInOutServiceImpl.java

@@ -381,6 +381,7 @@ public class ProdInOutServiceImpl extends CommonBaseServiceImpl<ProdInOutMapper,
         double pdYqty=0;
         double pdSendPrice = 0.0;
         double pdTaxrate = 0.0;
+        DocBaseDTO baseDTO = new DocBaseDTO();
         ProdInOut sourcePi = checkAndReturnOrder(id);
         List<ProdIODetail> sourceDetails =prodIODetailMapper.selectByFK(id);
         if (null == sourcePi || StringUtils.isEmpty(sourcePi.getPi_inoutno()) || sourceDetails.size() == 0) {
@@ -481,8 +482,12 @@ public class ProdInOutServiceImpl extends CommonBaseServiceImpl<ProdInOutMapper,
         setTotal(targetPi);
 
         //日志记录
-        DocBaseDTO baseDTO = new DocBaseDTO(id, sourcePi.getPi_inoutno(), BillCodeSeq.SALEIN.getCaller());
-        messageLogService.customizeLog(baseDTO, Operation.TURNPRODOUTRETURN);
+        DocBaseDTO log = new DocBaseDTO(id, sourcePi.getPi_inoutno(), BillCodeSeq.SALEIN.getCaller());
+        messageLogService.customizeLog(log, Operation.TURNPRODOUTRETURN);
+
+        baseDTO.setId(pi_id);
+        baseDTO.setCode(piInoutno);
+        baseDTO.setName(BillCodeSeq.SALEIN.getName());
         return baseDTO;
 
     }

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/service/impl/SaleReportServiceImpl.java

@@ -1,18 +1,23 @@
 package com.usoftchina.saas.sale.service.impl;
 
+import com.alibaba.fastjson.JSONArray;
 import com.github.pagehelper.PageHelper;
 import com.github.pagehelper.PageInfo;
 import com.usoftchina.saas.commons.dto.ListReqDTO;
 import com.usoftchina.saas.context.BaseContextHolder;
 import com.usoftchina.saas.page.PageDefault;
 import com.usoftchina.saas.page.PageRequest;
+import com.usoftchina.saas.sale.mapper.SaleListMapper;
 import com.usoftchina.saas.sale.mapper.SaleProfitViewMapper;
 import com.usoftchina.saas.sale.mapper.SalerecViewMapper;
 import com.usoftchina.saas.sale.service.SaleReportService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.util.StringUtils;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 /**
  * @author: guq
@@ -25,38 +30,90 @@ public class SaleReportServiceImpl implements SaleReportService{
     private SaleProfitViewMapper saleProfitViewMapper;
     @Autowired
     private SalerecViewMapper salerecViewMapper;
+    @Autowired
+    private SaleListMapper saleListMapper;
 
     @Override
-    public PageInfo getSaleProfitData(PageRequest page, ListReqDTO req) {
-        return getListDATA(page, req, "SaleProfit");
+    public Map<String, Object> getSaleProfitData(@PageDefault(size = 10) PageRequest page, ListReqDTO req) {
+        PageHelper.startPage(page.getNumber(), page.getSize());
+        Map<String, Object> map = new HashMap<String, Object>();
+        List list = null;
+        Long companyId = BaseContextHolder.getCompanyId();
+        String con = req.getFinalCondition();
+        String calculateFieldsSql = req.getCalculateFieldsSql();
+        JSONArray arr = null;
+        if (null == con) {
+            con = "1=1";
+        }
+        list = saleProfitViewMapper.selectByCondition(con, companyId);
+        //取分页信息
+        PageInfo pageInfo = new PageInfo(list);
+        //取对应计算数据
+        if (!StringUtils.isEmpty(calculateFieldsSql)) {
+            String res = saleProfitViewMapper.selectCalculateFields(calculateFieldsSql, con, companyId);
+            try {
+                arr = JSONArray.parseArray(res);
+            } catch (Exception e) {
+            }
+        }
+        map.put("list", pageInfo);
+        map.put("calculate", arr);
+        return map;
     }
 
     @Override
-    public PageInfo getSaleRecData(PageRequest page, ListReqDTO req) {
-        return getListDATA(page, req, "SaleRec");
-    }
-
-    private PageInfo getListDATA(@PageDefault(size = 10) PageRequest page, ListReqDTO req, String type) {
+    public Map<String, Object> getSaleRecData(@PageDefault(size = 10) PageRequest page, ListReqDTO req) {
         PageHelper.startPage(page.getNumber(), page.getSize());
-        //查询数据
-        List lists = getListByType(req, type);
+        Map<String, Object> map = new HashMap<String, Object>();
+        List list = null;
+        Long companyId = BaseContextHolder.getCompanyId();
+        String con = req.getFinalCondition();
+        String calculateFieldsSql = req.getCalculateFieldsSql();
+        JSONArray arr = null;
+        if (null == con) {
+            con = "1=1";
+        }
+        list = salerecViewMapper.selectByCondition(con, companyId);
         //取分页信息
-        PageInfo pageInfo = new PageInfo(lists);
-        return pageInfo;
+        PageInfo pageInfo = new PageInfo(list);
+        //取对应计算数据
+        if (!StringUtils.isEmpty(calculateFieldsSql)) {
+            String res = salerecViewMapper.selectCalculateFields(calculateFieldsSql, con, companyId);
+            try {
+                arr = JSONArray.parseArray(res);
+            } catch (Exception e) {
+            }
+        }
+        map.put("list", pageInfo);
+        map.put("calculate", arr);
+        return map;
     }
 
-    private List getListByType(ListReqDTO req, String type) {
+    @Override
+    public Map<String, Object> getSaleDetail(@PageDefault(size = 10) PageRequest page, ListReqDTO req) {
+        PageHelper.startPage(page.getNumber(), page.getSize());
+        Map<String, Object> map = new HashMap<String, Object>();
         List list = null;
         Long companyId = BaseContextHolder.getCompanyId();
         String con = req.getFinalCondition();
+        String calculateFieldsSql = req.getCalculateFieldsSql();
+        JSONArray arr = null;
         if (null == con) {
             con = "1=1";
         }
-        if ("SaleProfit".equals(type)) {
-            list = saleProfitViewMapper.selectByCondition(con, companyId);
-        } else if ("SaleRec".equals(type)){
-            list = salerecViewMapper.selectByCondition(con, companyId);
+        list = saleListMapper.selectSaleListByCondition(con, companyId);
+        //取分页信息
+        PageInfo pageInfo = new PageInfo(list);
+        //取对应计算数据
+        if (!StringUtils.isEmpty(calculateFieldsSql)) {
+            String res = saleListMapper.selectCalculateFields(calculateFieldsSql, con, companyId);
+            try {
+                arr = JSONArray.parseArray(res);
+            } catch (Exception e) {
+            }
         }
-        return list;
+        map.put("list", pageInfo);
+        map.put("calculate", arr);
+        return map;
     }
 }

applications/sale/sale-server/src/main/java/com/usoftchina/saas/sale/service/impl/SaleServiceImpl.java

@@ -404,6 +404,7 @@ public class SaleServiceImpl implements SaleService{
         Integer count = 0;
         double pdQty = 0;
         double pdYqty = 0;
+        DocBaseDTO baseDTO = new DocBaseDTO();
         Long companyId = BaseContextHolder.getCompanyId();
         Sale sale = saleMapper.selectByPrimaryKey(id);
         List<SaleDetail> details = saledetailMapper.selectByFK(id);
@@ -492,8 +493,12 @@ public class SaleServiceImpl implements SaleService{
         prodIODetailMapper.updatePDSaleOut(pi_id);
         prodInOutMapper.updatePiTotal(pi_id);
         //日志记录
-        DocBaseDTO baseDTO = new DocBaseDTO(id, sale.getSa_code(), BillCodeSeq.SALEOUT.getCaller());
-        messageLogService.customizeLog(baseDTO, Operation.TURNPRODOUT);
+        DocBaseDTO log = new DocBaseDTO(id, sale.getSa_code(), BillCodeSeq.SALEOUT.getCaller());
+        messageLogService.customizeLog(log, Operation.TURNPRODOUT);
+
+        baseDTO.setId(pi_id);
+        baseDTO.setCode(pi_inoutno);
+        baseDTO.setName(BillCodeSeq.SALEOUT.getName());
         return baseDTO;
     }
 

applications/sale/sale-server/src/main/resources/mapper/SaleListMapper.xml

@@ -108,4 +108,16 @@
         order by sa_id desc
     </select>
 
+    <select id="selectCalculateFields" resultType="string">
+        select  ${fields}  from sale left join saledetail on sa_id=sd_said left join product
+        on sd_prodid = pr_id and sale.companyId = product.companyid
+        <where>
+            <if test="con != null">
+                ${con}
+            </if>
+            <if test="companyId != null">
+                and   sale.companyId = #{companyId}
+            </if>
+        </where>
+    </select>
 </mapper>

applications/sale/sale-server/src/main/resources/mapper/SaleProfitViewMapper.xml

@@ -39,4 +39,16 @@
     </where>
     order by sa_date desc
   </select>
+
+  <select id="selectCalculateFields" resultType="string">
+    select   ${fields}  from Sale_Profit_View
+    <where>
+      <if test="con != null">
+        ${con}
+      </if>
+      <if test="companyId != null">
+        and  companyId = #{companyId}
+      </if>
+    </where>
+  </select>
  </mapper>

applications/sale/sale-server/src/main/resources/mapper/SalerecViewMapper.xml

@@ -29,4 +29,16 @@
     </where>
     order by rb_date desc
   </select>
+
+  <select id="selectCalculateFields" resultType="string">
+    select   ${fields}  from Salerec_View
+    <where>
+      <if test="con != null">
+        ${con}
+      </if>
+      <if test="companyId != null">
+        and  companyId = #{companyId}
+      </if>
+    </where>
+  </select>
 </mapper>

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/home/charts/MonthIO.js

@@ -17,7 +17,7 @@ Ext.define('saas.view.home.charts.MonthIO', {
                 bind: {
                     captions: {
                         title: {
-                            text: '本月收入（万元）：{month_in}\n本月支出（万元）：{month_out}',
+                            text: '本月收入支出额（万元）\n收入：{month_in}\t支出：{month_out}',
                             style: {
                                 'font-size': '14px',
                                 'color': '#485465',

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

@@ -17,7 +17,7 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
                 bind: {
                     captions: {
                         title: {
-                            text: '采购金额（万元）',
+                            text: '近六月采购趋势图',
                             style: {
                                 'font-size': '14px',
                                 'color': '#485465',
@@ -72,6 +72,12 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
                         trackMouse: true,
                         renderer: me.onBarTipRender
                     },
+                    // label: {
+                    //     field: 'y',
+                    //     display: 'insideEnd',
+                    //     fontSize: '12px',
+                    //     strokeStyle: '#fff',
+                    // },
                     style: {
                         lineWidth: 0,
                         strokeStyle: 'transparent',
@@ -85,7 +91,7 @@ Ext.define('saas.view.home.charts.PurchaseTrend', {
     },
 
     onBarTipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + ': ' + record.get('y') + '万元');
+        tooltip.setHtml(record.get('x') + '月: ' + record.get('y') + '万元');
     },
 
     categoryRender: function(axis, label, layoutContext, lastLabel) {

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

@@ -17,7 +17,7 @@ Ext.define('saas.view.home.charts.StockAmount', {
                 bind: {
                     captions: {
                         title: {
-                            text: '库存金额（万元）',
+                            text: '近六月库存金额图',
                             style: {
                                 'font-size': '14px',
                                 'color': '#485465',
@@ -85,7 +85,7 @@ Ext.define('saas.view.home.charts.StockAmount', {
     },
 
     onBarTipRender: function (tooltip, record, item) {
-        tooltip.setHtml(record.get('x') + ': ' + record.get('y') + '万元');
+        tooltip.setHtml(record.get('x') + '月: ' + record.get('y') + '万元');
     },
 
     categoryRender: function(axis, label, layoutContext, lastLabel) {

frontend/saas-web/app/view/purchase/purchaseIn/FormPanel.js

@@ -323,7 +323,7 @@ Ext.define('saas.view.purchase.purchaseIn.FormPanel', {
                 text : "采购序号",
                 dataIndex : "pd_orderdetno", 
                 xtype : "numbercolumn",
-                width : 80.0,
+                width : 110.0,
                 format: '0',
                 renderer: function(v) {
                     return v ? v : null;

frontend/saas-web/app/view/purchase/purchaseOut/FormPanel.js

@@ -310,7 +310,7 @@ Ext.define('saas.view.purchase.purchaseOut.FormPanel', {
                 text : "采购序号", 
                 dataIndex : "pd_orderdetno", 
                 xtype : "numbercolumn", 
-                width : 80.0,
+                width : 110.0,
                 renderer: function(v) {
                     return Ext.util.Format.number(v, '0');
                 }

frontend/saas-web/app/view/sale/saleIn/FormPanel.js

@@ -254,7 +254,7 @@ Ext.define('saas.view.sale.saleIn.FormPanel', {
                 text : "销售序号", 
                 dataIndex : "pd_orderdetno", 
                 xtype : "numbercolumn",
-                width: 80,
+                width: 序号,
                 format: '0',
                 renderer: function(v) {
                     return v ? v : null;

frontend/saas-web/app/view/sale/saleOut/FormPanel.js

@@ -261,7 +261,7 @@ Ext.define('saas.view.sale.saleout.FormPanel', {
                 text : "销售序号", 
                 dataIndex : "pd_orderdetno", 
                 xtype : "numbercolumn",
-                width : 80.0,
+                width : 110.0,
                 format: '0',
                 renderer: function(v) {
                     return v ? v : null;

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>