From 1f3d83f84ed56dc1cc76dc0eee72891c3fa8e2cc Mon Sep 17 00:00:00 2001
From: guy <guy@finereport.com>
Date: Wed, 14 Mar 2018 15:26:35 +0800
Subject: [PATCH] update

---
 src/css/resource/font.css   |  21 ++--
 src/css/resource/icon.css   | 172 +++++++++++++++++++++----------
 src/less/image.less         | 196 +++++++++++++-----------------------
 src/less/resource/icon.less |   6 +-
 4 files changed, 202 insertions(+), 193 deletions(-)

diff --git a/src/css/resource/font.css b/src/css/resource/font.css
index 31c5ce923..ce1ae52fe 100644
--- a/src/css/resource/font.css
+++ b/src/css/resource/font.css
@@ -2,6 +2,7 @@
   font-family: 'bi';
   src: url('font/iconfont.eot');
   src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg');
+  
   /*  iOS 4.1- */
 }
 .b-font {
@@ -205,14 +206,14 @@
   content: "\e762";
   color: #999999;
 }
-.dot-e-font.active .b-font:before {
-  content: "\e762";
-  color: #1a1a1a;
-}
 .dot-e-font:active .b-font:before {
   content: "\e762";
   color: #3685f2;
 }
+.dot-e-font.active .b-font:before {
+  content: "\e762";
+  color: #1a1a1a;
+}
 .dot-e-font.disabled .b-font:before {
   content: "\e762";
   color: #ffffff;
@@ -277,11 +278,11 @@
   content: "\e70c";
   color: inherit;
 }
-.pull-right-e-font.active .b-font:before {
+.pull-right-e-font:active .b-font:before {
   content: "\e70c";
   color: #3f8ce8;
 }
-.pull-right-e-font:active .b-font:before {
+.pull-right-e-font.active .b-font:before {
   content: "\e70c";
   color: #3f8ce8;
 }
@@ -349,11 +350,11 @@
   content: "\e6bd";
   color: inherit;
 }
-.copy-e-font.active .b-font:before {
+.copy-e-font:active .b-font:before {
   content: "\e6bd";
   color: #3f8ce8;
 }
-.copy-e-font:active .b-font:before {
+.copy-e-font.active .b-font:before {
   content: "\e6bd";
   color: #3f8ce8;
 }
@@ -421,11 +422,11 @@
   content: "\e6cf";
   color: inherit;
 }
-.check-mark-e-font.active .b-font:before {
+.check-mark-e-font:active .b-font:before {
   content: "\e6cf";
   color: #3f8ce8;
 }
-.check-mark-e-font:active .b-font:before {
+.check-mark-e-font.active .b-font:before {
   content: "\e6cf";
   color: #3f8ce8;
 }
diff --git a/src/css/resource/icon.css b/src/css/resource/icon.css
index 3089c3fae..aa016e347 100644
--- a/src/css/resource/icon.css
+++ b/src/css/resource/icon.css
@@ -1,264 +1,264 @@
 .tree-collapse-icon-type1 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_collapse_1.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_collapse_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_1.png');
   background-size: contain;
   _background: none;
 }
 .tree-collapse-icon-type1 .x-icon.hack {
-  background: url('images/1x/icon/tree_collapse_1.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_collapse_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_1.png');
   _background: none;
 }
 .tree-collapse-icon-type2 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_collapse_2.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_collapse_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_2.png');
   background-size: contain;
   _background: none;
 }
 .tree-collapse-icon-type2 .x-icon.hack {
-  background: url('images/1x/icon/tree_collapse_2.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_collapse_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_2.png');
   _background: none;
 }
 .tree-collapse-icon-type3 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_collapse_3.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_collapse_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_3.png');
   background-size: contain;
   _background: none;
 }
 .tree-collapse-icon-type3 .x-icon.hack {
-  background: url('images/1x/icon/tree_collapse_3.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_collapse_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_3.png');
   _background: none;
 }
 .tree-collapse-icon-type4 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_collapse_4.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_collapse_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_collapse_4.png');
   background-size: contain;
   _background: none;
 }
 .tree-collapse-icon-type4 .x-icon.hack {
-  background: url('images/1x/icon/tree_collapse_4.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_collapse_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_collapse_4.png');
   _background: none;
 }
 .tree-expand-icon-type1 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_expand_1.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_expand_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_1.png');
   background-size: contain;
   _background: none;
 }
 .tree-expand-icon-type1 .x-icon.hack {
-  background: url('images/1x/icon/tree_expand_1.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_expand_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_1.png');
   _background: none;
 }
 .tree-expand-icon-type2 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_expand_2.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_expand_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_2.png');
   background-size: contain;
   _background: none;
 }
 .tree-expand-icon-type2 .x-icon.hack {
-  background: url('images/1x/icon/tree_expand_2.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_expand_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_2.png');
   _background: none;
 }
 .tree-expand-icon-type3 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_expand_3.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_expand_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_3.png');
   background-size: contain;
   _background: none;
 }
 .tree-expand-icon-type3 .x-icon.hack {
-  background: url('images/1x/icon/tree_expand_3.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_expand_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_3.png');
   _background: none;
 }
 .tree-expand-icon-type4 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_expand_4.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_expand_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_expand_4.png');
   background-size: contain;
   _background: none;
 }
 .tree-expand-icon-type4 .x-icon.hack {
-  background: url('images/1x/icon/tree_expand_4.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_expand_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_expand_4.png');
   _background: none;
 }
 .tree-vertical-line-type2 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_vertical_line_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_2.png');
   background-size: contain;
   _background: none;
 }
 .tree-vertical-line-type2 .x-icon.hack {
-  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_vertical_line_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_2.png');
   _background: none;
 }
 .tree-vertical-line-type3 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_vertical_line_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_3.png');
   background-size: contain;
   _background: none;
 }
 .tree-vertical-line-type3 .x-icon.hack {
-  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_vertical_line_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_3.png');
   _background: none;
 }
 .tree-vertical-line-type4 .x-icon {
   display: block;
-  background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/tree_vertical_line_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/tree_vertical_line_4.png');
   background-size: contain;
   _background: none;
 }
 .tree-vertical-line-type4 .x-icon.hack {
-  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/tree_vertical_line_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/tree_vertical_line_4.png');
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type1 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_collapse_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_1.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type1 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_collapse_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_1.png');
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type2 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_collapse_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_2.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type2 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_collapse_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_2.png');
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type3 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_collapse_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_3.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type3 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_collapse_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_3.png');
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type4 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_collapse_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_collapse_4.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-collapse-icon-type4 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_collapse_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_collapse_4.png');
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type1 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_expand_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_1.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type1 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_expand_1.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_1.png');
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type2 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_expand_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_2.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type2 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_expand_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_2.png');
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type3 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_expand_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_3.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type3 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_expand_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_3.png');
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type4 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_expand_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_expand_4.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-expand-icon-type4 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_expand_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_expand_4.png');
   _background: none;
 }
 .bi-theme-dark .tree-vertical-line-type2 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_2.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-vertical-line-type2 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_vertical_line_2.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_2.png');
   _background: none;
 }
 .bi-theme-dark .tree-vertical-line-type3 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_3.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-vertical-line-type3 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_vertical_line_3.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_3.png');
   _background: none;
 }
 .bi-theme-dark .tree-vertical-line-type4 .x-icon {
   display: block;
-  background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/dark/tree_vertical_line_4.png');
   background-size: contain;
   _background: none;
 }
 .bi-theme-dark .tree-vertical-line-type4 .x-icon.hack {
-  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/dark/tree_vertical_line_4.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/dark/tree_vertical_line_4.png');
   _background: none;
 }
@@ -274,6 +274,32 @@
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
   _background: none;
 }
+.check-box-icon:hover .x-icon,
+.check-box-icon.hover .x-icon {
+  display: block;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.check-box-icon:hover .x-icon.hack,
+.check-box-icon.hover .x-icon.hack {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
+.check-box-icon:active .x-icon {
+  display: block;
+  background: url('images/2x/icon/check_box_normal.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_normal.png');
+  background-size: contain;
+  _background: none;
+}
+.check-box-icon:active .x-icon.hack {
+  background: url('images/1x/icon/check_box_normal.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_normal.png');
+  _background: none;
+}
 .check-box-icon.active .x-icon {
   display: block;
   background: url('images/2x/icon/check_box_active.png') no-repeat 0 0;
@@ -298,6 +324,18 @@
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable.png');
   _background: none;
 }
+.check-box-icon.disabled.active .x-icon {
+  display: block;
+  background: url('images/2x/icon/check_box_disable2.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/check_box_disable2.png');
+  background-size: contain;
+  _background: none;
+}
+.check-box-icon.disabled.active .x-icon.hack {
+  background: url('images/1x/icon/check_box_disable2.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/check_box_disable2.png');
+  _background: none;
+}
 .radio-icon .x-icon {
   display: block;
   background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
@@ -310,39 +348,65 @@
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
-.radio-icon.active .x-icon {
+.radio-icon:hover .x-icon,
+.radio-icon.hover .x-icon {
   display: block;
-  background: url('images/2x/icon/radio_active.png') no-repeat 0 0;
-  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_active.png');
+  background: url('images/2x/icon/radio_normal.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_normal.png');
   background-size: contain;
   _background: none;
 }
-.radio-icon.active .x-icon.hack {
-  background: url('images/1x/icon/radio_active.png') no-repeat 0 0;
-  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_active.png');
+.radio-icon:hover .x-icon.hack,
+.radio-icon.hover .x-icon.hack {
+  background: url('images/1x/icon/radio_normal.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_normal.png');
   _background: none;
 }
-.radio-icon.disabled .x-icon {
+.radio-icon:active .x-icon {
+  display: block;
+  background: url('images/2x/"icon/radio_normal.png" "icon/radio_active.png"') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/"icon/radio_normal.png" "icon/radio_active.png"');
+  background-size: contain;
+  _background: none;
+}
+.radio-icon:active .x-icon.hack {
+  background: url('images/1x/"icon/radio_normal.png" "icon/radio_active.png"') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/"icon/radio_normal.png" "icon/radio_active.png"');
+  _background: none;
+}
+.radio-icon.active .x-icon {
   display: block;
   background: url('images/2x/icon/radio_disable.png') no-repeat 0 0;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable.png');
   background-size: contain;
   _background: none;
 }
-.radio-icon.disabled .x-icon.hack {
+.radio-icon.active .x-icon.hack {
   background: url('images/1x/icon/radio_disable.png') no-repeat 0 0;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable.png');
   _background: none;
 }
+.radio-icon.disabled .x-icon {
+  display: block;
+  background: url('images/2x/icon/radio_disable2.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/radio_disable2.png');
+  background-size: contain;
+  _background: none;
+}
+.radio-icon.disabled .x-icon.hack {
+  background: url('images/1x/icon/radio_disable2.png') no-repeat 0 0;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/radio_disable2.png');
+  _background: none;
+}
 .check-half-select-icon .x-icon {
   display: block;
-  background: url('images/2x/icon/half_selected.png') no-repeat 0px 0px;
+  background: url('images/2x/icon/half_selected.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/2x/icon/half_selected.png');
   background-size: contain;
   _background: none;
 }
 .check-half-select-icon .x-icon.hack {
-  background: url('images/1x/icon/half_selected.png') no-repeat 0px 0px;
+  background: url('images/1x/icon/half_selected.png') no-repeat center center;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/icon/half_selected.png');
   _background: none;
 }
diff --git a/src/less/image.less b/src/less/image.less
index 3e6f261d4..09590acdd 100644
--- a/src/less/image.less
+++ b/src/less/image.less
@@ -18,137 +18,112 @@
   _background: none;
 }
 
-.icon(@class, @iconPath, @top:0px, @left:0px) {
+// 默认icon
+.icon(@class, @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath);
       }
     }
   }
 }
 
-.icon_hover(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
+// 有悬浮效果的icon
+.icon_hover(@class, @iconPath, @hoverPath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath, 0, 0);
       }
     }
     &:hover .x-icon,
-    &.hover .x-icon,
-    &:active .x-icon,
-    &.active .x-icon {
-      display: block;
-      .image2xPath(@iconPath, -@top, -(@left + @distance));
-      &.hack {
-        .imagePath(@iconPath, -@top, -(@left + @distance));
-      }
-    }
-    &.disabled .x-icon {
-      display: block;
-      .image2xPath(@iconPath, -@top, -@left);
-      &.hack {
-        .imagePath(@iconPath, -@top, -@left);
-      }
-    }
-  }
-}
-
-.icon_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
-  .@{class} {
-    & .x-icon {
-      display: block;
-      .image2xPath(@iconPath, -@top, -@left);
-      &.hack {
-        .imagePath(@iconPath, -@top, -@left);
-      }
-    }
-    &:active .x-icon,
-    &.active .x-icon {
+    &.hover .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -(@left + @distance));
+      .image2xPath(@hoverPath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -(@left + @distance));
+        .imagePath(@hoverPath, 0, 0);
       }
     }
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath, 0, 0);
       }
     }
   }
 }
 
-.icon_hover_active(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
+// 有悬浮、激活(选中)的icon
+.icon_hover_active(@class, @iconPath, @hoverPath: @iconPath, @activePath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath, 0, 0);
       }
     }
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -(@left+@distance));
+      .image2xPath(@hoverPath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -(@left+@distance));
+        .imagePath(@hoverPath, 0, 0);
       }
     }
-
     &:active .x-icon,
     &.active .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -(@left+@distance*2));
+      .image2xPath(@activePath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -(@left+@distance*2));
+        .imagePath(@activePath, 0, 0);
       }
     }
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath, 0, 0);
       }
     }
   }
 }
 
-.icon_select(@class, @iconPath, @top:0px, @left:0px, @distance: 20) {
+// 有悬浮、选中的icon
+.icon_select(@class, @iconPath, @selectPath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath);
       }
     }
     &.active .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -(@left+@distance));
+      .image2xPath(@selectPath);
       &.hack {
-        .imagePath(@iconPath, -@top, -(@left+@distance));
+        .imagePath(@selectPath);
       }
     }
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath, -@top, -@left);
+      .image2xPath(@iconPath);
       &.hack {
-        .imagePath(@iconPath, -@top, -@left);
+        .imagePath(@iconPath);
       }
     }
   }
 }
 
-.icon_custom(@class, @iconPath, @disablePath:none) {
+// 可自定义默认和灰化状态
+.icon_custom(@class, @iconPath, @disablePath: @iconPath) {
   .@{class} {
     & .x-icon {
       display: block;
@@ -168,6 +143,7 @@
   }
 }
 
+//可自定义默认、悬浮、灰化状态
 .icon_custom(@class, @iconPath, @hoverPath, @disablePath) when not (@disablePath = none) {
   .@{class} {
     & .x-icon {
@@ -197,6 +173,7 @@
   }
 }
 
+// 可自定义默认、悬浮、激活(选中)、灰化状态
 .icon_custom(@class, @iconPath, @hoverPath, @activePath, @disablePath) when not (@disablePath = none) {
   .@{class} {
     & .x-icon {
@@ -235,7 +212,8 @@
   }
 }
 
-.icon_custom(@class, @iconPath, @hoverPath:none, @activePath:none, @disablePath:none, @activeDisablePath:none) when not (@activeDisablePath = none) {
+// 可自定义默认、悬浮、激活、选中、灰化状态
+.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectedPath, @disablePath) when not (@disablePath = none) {
   .@{class} {
     & .x-icon {
       display: block;
@@ -244,6 +222,7 @@
         .imagePath(@iconPath, 0, 0);
       }
     }
+
     &:hover .x-icon,
     &.hover .x-icon {
       display: block;
@@ -253,59 +232,34 @@
       }
     }
 
-    &:active .x-icon,
-    &.active .x-icon {
+    &:active .x-icon {
       display: block;
       .image2xPath(@activePath, 0, 0);
       &.hack {
         .imagePath(@activePath, 0, 0);
       }
     }
-    &.disabled .x-icon {
-      display: block;
-      .image2xPath(@disablePath, 0, 0);
-      &.hack {
-        .imagePath(@disablePath, 0, 0);
-      }
-    }
-    &.disabled.active .x-icon {
-      display: block;
-      .image2xPath(@activeDisablePath, 0, 0);
-      &.hack {
-        .imagePath(@activeDisablePath, 0, 0);
-      }
-    }
-  }
-}
 
-.icon_custom_hover(@class, @iconPath, @hoverPath:none) {
-  .@{class} {
-    & .x-icon {
-      display: block;
-      .image2xPath(@iconPath, 0, 0);
-      &.hack {
-        .imagePath(@iconPath, 0, 0);
-      }
-    }
-    &:hover .x-icon,
-    &.hover .x-icon {
+    &.active .x-icon {
       display: block;
-      .image2xPath(@hoverPath, 0, 0);
+      .image2xPath(@selectedPath, 0, 0);
       &.hack {
-        .imagePath(@hoverPath, 0, 0);
+        .imagePath(@selectedPath, 0, 0);
       }
     }
+
     &.disabled .x-icon {
       display: block;
-      .image2xPath(@iconPath, 0, 0);
+      .image2xPath(@disablePath, 0, 0);
       &.hack {
-        .imagePath(@iconPath, 0, 0);
+        .imagePath(@disablePath, 0, 0);
       }
     }
   }
 }
 
-.icon_custom_hover_active(@class, @iconPath, @hoverPath:none, @activePath) {
+// 可自定义默认、悬浮、激活、选中、灰化、激活状态灰化状态
+.icon_custom(@class, @iconPath, @hoverPath, @activePath, @selectPath, @disablePath, @activeDisablePath) when not (@activeDisablePath = none) {
   .@{class} {
     & .x-icon {
       display: block;
@@ -322,33 +276,15 @@
         .imagePath(@hoverPath, 0, 0);
       }
     }
-    &:active .x-icon,
-    &.active .x-icon {
+
+    &:active .x-icon {
       display: block;
       .image2xPath(@activePath, 0, 0);
       &.hack {
         .imagePath(@activePath, 0, 0);
       }
     }
-    &.disabled .x-icon {
-      display: block;
-      .image2xPath(@iconPath, 0, 0);
-      &.hack {
-        .imagePath(@iconPath, 0, 0);
-      }
-    }
-  }
-}
 
-.icon_custom_select(@class, @iconPath, @selectPath, @disablePath: @iconPath) {
-  .@{class} {
-    & .x-icon {
-      display: block;
-      .image2xPath(@iconPath, 0, 0);
-      &.hack {
-        .imagePath(@iconPath, 0, 0);
-      }
-    }
     &.active .x-icon {
       display: block;
       .image2xPath(@selectPath, 0, 0);
@@ -356,6 +292,7 @@
         .imagePath(@selectPath, 0, 0);
       }
     }
+
     &.disabled .x-icon {
       display: block;
       .image2xPath(@disablePath, 0, 0);
@@ -363,16 +300,21 @@
         .imagePath(@disablePath, 0, 0);
       }
     }
+    &.disabled.active .x-icon {
+      display: block;
+      .image2xPath(@activeDisablePath, 0, 0);
+      &.hack {
+        .imagePath(@activeDisablePath, 0, 0);
+      }
+    }
   }
 }
 
-//
 @color-bi-font-native: inherit;
-//active
 @color-bi-font-hover: inherit;
-//hover
 @color-bi-font-active: #3f8ce8;
 
+// 默认font
 .font(@class,@content, @color: @color-bi-font-native) {
   @fc: "\@{content}";
   .@{class} {
@@ -390,6 +332,7 @@
   }
 }
 
+// 有悬浮效果的font
 .font-hover(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover) {
   @fc: "\@{content}";
   .@{class} {
@@ -412,7 +355,8 @@
   }
 }
 
-.font-effect(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active, @color-selected: @color-bi-font-active) {
+// 有默认、激活(选中)的font
+.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
   @fc: "\@{content}";
   .@{class} {
     & .b-font {
@@ -427,11 +371,9 @@
       content: @fc;
       color: @color-hover;
     }
+
+    &:active .b-font:before,
     &.active .b-font:before {
-      content: @fc;
-      color: @color-selected;
-    }
-    &:active .b-font:before {
       content: @fc;
       color: @color-active;
     }
@@ -442,7 +384,7 @@
   }
 }
 
-.font-hover-active(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active) {
+.font-effect(@class,@content,@color-native: @color-bi-font-native, @color-hover: @color-bi-font-hover, @color-active: @color-bi-font-active, @color-selected: @color-bi-font-active) {
   @fc: "\@{content}";
   .@{class} {
     & .b-font {
@@ -457,15 +399,17 @@
       content: @fc;
       color: @color-hover;
     }
-
-    &:active .b-font:before,
-    &.active .b-font:before {
+    &:active .b-font:before {
       content: @fc;
       color: @color-active;
     }
+    &.active .b-font:before {
+      content: @fc;
+      color: @color-selected;
+    }
     &.disabled .b-font:before {
       content: @fc;
       color: @color-native;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/resource/icon.less b/src/less/resource/icon.less
index 19c2dd9d1..293f48ed6 100644
--- a/src/less/resource/icon.less
+++ b/src/less/resource/icon.less
@@ -59,13 +59,13 @@
 }
 
 //CheckBox
-.icon_custom_select(check-box-icon, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable);
+.icon_custom(check-box-icon, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable, @icon-checkbox-active-disable);
 //Radio
-.icon_custom_select(radio-icon, @icon-radio-normal, @icon-radio-active, @icon-radio-disable);
+.icon_custom(radio-icon, @icon-radio-normal, @icon-radio-normal, @icon-radio-normal @icon-radio-active, @icon-radio-disable, @icon-radio-active-disable);
 
 //Half Select
 .icon(check-half-select-icon, @icon-half-select);
 
 //滑块
-.icon_custom_hover(slider-icon, @icon-slider-normal, @icon-slider-active);
+.icon_hover(slider-icon, @icon-slider-normal, @icon-slider-active);