diff --git a/src/App.vue b/src/App.vue
index cde5ae9..067c8d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,10 +3,10 @@
     <vue-easy-tree
       ref="veTree"
       node-key="id"
-      height="calc(100vh - 20px)"
       :data="treeData"
       :props="props"
       :item-size="26"
+      height="calc(100vh - 30px)"
       show-checkbox
     >
     </vue-easy-tree>
diff --git a/src/assets/base.scss b/src/assets/base.scss
deleted file mode 100644
index 380b79f..0000000
--- a/src/assets/base.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "common/transition.scss";
-@import "icon.scss";
diff --git a/src/assets/common/transition.scss b/src/assets/common/transition.scss
index f8eb9e3..9d8c358 100644
--- a/src/assets/common/transition.scss
+++ b/src/assets/common/transition.scss
@@ -1,99 +1,5 @@
 @import "var";
 
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-.fade-in-linear-enter,
-.fade-in-linear-leave,
-.fade-in-linear-leave-active {
-  opacity: 0;
-}
-
-.el-fade-in-linear-enter-active,
-.el-fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-.el-fade-in-linear-enter,
-.el-fade-in-linear-leave,
-.el-fade-in-linear-leave-active {
-  opacity: 0;
-}
-
-.el-fade-in-enter-active,
-.el-fade-in-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.el-fade-in-enter,
-.el-fade-in-leave-active {
-  opacity: 0;
-}
-
-.el-zoom-in-center-enter-active,
-.el-zoom-in-center-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.el-zoom-in-center-enter,
-.el-zoom-in-center-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.el-zoom-in-top-enter-active,
-.el-zoom-in-top-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center top;
-}
-.el-zoom-in-top-enter,
-.el-zoom-in-top-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.el-zoom-in-bottom-enter-active,
-.el-zoom-in-bottom-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center bottom;
-}
-.el-zoom-in-bottom-enter,
-.el-zoom-in-bottom-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.el-zoom-in-left-enter-active,
-.el-zoom-in-left-leave-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: $--md-fade-transition;
-  transform-origin: top left;
-}
-.el-zoom-in-left-enter,
-.el-zoom-in-left-leave-active {
-  opacity: 0;
-  transform: scale(.45, .45);
-}
-
 .collapse-transition {
   transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
 }
-.horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
-}
-
-.el-list-enter-active,
-.el-list-leave-active {
-  transition: all 1s;
-}
-.el-list-enter, .el-list-leave-active {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-.el-opacity-transition {
-  transition: opacity .3s cubic-bezier(.55,0,.1,1);
-}
\ No newline at end of file
diff --git a/src/assets/common/var.scss b/src/assets/common/var.scss
index 60d273e..be353fb 100644
--- a/src/assets/common/var.scss
+++ b/src/assets/common/var.scss
@@ -6,12 +6,7 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
-$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
-$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--all-transition: all .3s cubic-bezier(.645, .045, .355, 1) !default;
 
 /* Color
 -------------------------- */
@@ -19,35 +14,8 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
 $--color-primary: #409EFF !default;
 /// color|1|Background Color|4
 $--color-white: #FFFFFF !default;
-/// color|1|Background Color|4
-$--color-black: #000000 !default;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
-/// color|1|Functional Color|1
-$--color-success: #67C23A !default;
-/// color|1|Functional Color|1
-$--color-warning: #E6A23C !default;
-/// color|1|Functional Color|1
-$--color-danger: #F56C6C !default;
-/// color|1|Functional Color|1
-$--color-info: #909399 !default;
-
-$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
-$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
-$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
-$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
-
-$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;
-$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
-$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
-$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
+/* 8cc5ff */
 /// color|1|Font Color|2
 $--color-text-primary: #303133 !default;
 /// color|1|Font Color|2
@@ -59,43 +27,25 @@ $--color-text-placeholder: #C0C4CC !default;
 /// color|1|Border Color|3
 $--border-color-base: #DCDFE6 !default;
 /// color|1|Border Color|3
-$--border-color-light: #E4E7ED !default;
-/// color|1|Border Color|3
 $--border-color-lighter: #EBEEF5 !default;
 /// color|1|Border Color|3
 $--border-color-extra-light: #F2F6FC !default;
 
+
 // Background
 /// color|1|Background Color|4
 $--background-color-base: #F5F7FA !default;
 
-/* Link
--------------------------- */
-$--link-color: $--color-primary-light-2 !default;
-$--link-hover-color: $--color-primary !default;
-
 /* Border
 -------------------------- */
 $--border-width-base: 1px !default;
 $--border-style-base: solid !default;
-$--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
 /// borderRadius|1|Radius|0
 $--border-radius-base: 4px !default;
 /// borderRadius|1|Radius|0
 $--border-radius-small: 2px !default;
-/// borderRadius|1|Radius|0
-$--border-radius-circle: 100% !default;
-/// borderRadius|1|Radius|0
-$--border-radius-zero: 0 !default;
 
-// Box-shadow
-/// boxShadow|1|Shadow|1
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
-// boxShadow|1|Shadow|1
-$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
-/// boxShadow|1|Shadow|1
-$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
 /* Fill
 -------------------------- */
@@ -106,46 +56,23 @@ $--fill-base: $--color-white !default;
 $--font-path: 'fonts' !default;
 $--font-display: 'auto' !default;
 /// fontSize|1|Font Size|0
-$--font-size-extra-large: 20px !default;
-/// fontSize|1|Font Size|0
-$--font-size-large: 18px !default;
-/// fontSize|1|Font Size|0
-$--font-size-medium: 16px !default;
-/// fontSize|1|Font Size|0
 $--font-size-base: 14px !default;
+
 /// fontSize|1|Font Size|0
-$--font-size-small: 13px !default;
-/// fontSize|1|Font Size|0
-$--font-size-extra-small: 12px !default;
+$--font-size-base: 14px !default;
 /// fontWeight|1|Font Weight|1
 $--font-weight-primary: 500 !default;
-/// fontWeight|1|Font Weight|1
-$--font-weight-secondary: 100 !default;
-/// fontLineHeight|1|Line Height|2
-$--font-line-height-primary: 24px !default;
-/// fontLineHeight|1|Line Height|2
-$--font-line-height-secondary: 16px !default;
-$--font-color-disabled-base: #bbb !default;
-/* Size
--------------------------- */
-$--size-base: 14px !default;
+
 
 /* z-index
 -------------------------- */
 $--index-normal: 1 !default;
-$--index-top: 1000 !default;
-$--index-popper: 2000 !default;
+
 
 /* Disable base
 -------------------------- */
-$--disabled-fill-base: $--background-color-base !default;
 $--disabled-color-base: $--color-text-placeholder !default;
-$--disabled-border-base: $--border-color-light !default;
 
-/* Icon
--------------------------- */
-$--icon-color: #666 !default;
-$--icon-color-base: $--color-info !default;
 
 /* Checkbox
 -------------------------- */
@@ -211,309 +138,12 @@ $--checkbox-button-checked-font-color: $--color-white !default;
 $--checkbox-button-checked-border-color: $--color-primary !default;
 
 
-
-/* Radio
--------------------------- */
-/// fontSize||Font|1
-$--radio-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--radio-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--radio-font-color: $--color-text-regular !default;
-$--radio-input-height: 14px !default;
-$--radio-input-width: 14px !default;
-/// borderRadius||Border|2
-$--radio-input-border-radius: $--border-radius-circle !default;
-/// color||Color|0
-$--radio-input-background-color: $--color-white !default;
-$--radio-input-border: $--border-base !default;
-/// color||Color|0
-$--radio-input-border-color: $--border-color-base !default;
-/// color||Color|0
-$--radio-icon-color: $--color-white !default;
-
-$--radio-disabled-input-border-color: $--disabled-border-base !default;
-$--radio-disabled-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-icon-color: $--disabled-fill-base !default;
-
-$--radio-disabled-checked-input-border-color: $--disabled-border-base !default;
-$--radio-disabled-checked-input-fill: $--disabled-fill-base !default;
-$--radio-disabled-checked-icon-color: $--color-text-placeholder !default;
-
-/// color||Color|0
-$--radio-checked-font-color: $--color-primary !default;
-/// color||Color|0
-$--radio-checked-input-border-color: $--color-primary !default;
-/// color||Color|0
-$--radio-checked-input-background-color: $--color-white !default;
-/// color||Color|0
-$--radio-checked-icon-color: $--color-primary !default;
-
-$--radio-input-border-color-hover: $--color-primary !default;
-
-$--radio-bordered-height: 40px !default;
-$--radio-bordered-padding: 12px 20px 0 10px !default;
-$--radio-bordered-medium-padding: 10px 20px 0 10px !default;
-$--radio-bordered-small-padding: 8px 15px 0 10px !default;
-$--radio-bordered-mini-padding: 6px 15px 0 10px !default;
-$--radio-bordered-medium-input-height: 14px !default;
-$--radio-bordered-medium-input-width: 14px !default;
-$--radio-bordered-medium-height: 36px !default;
-$--radio-bordered-small-input-height: 12px !default;
-$--radio-bordered-small-input-width: 12px !default;
-$--radio-bordered-small-height: 32px !default;
-$--radio-bordered-mini-input-height: 12px !default;
-$--radio-bordered-mini-input-width: 12px !default;
-$--radio-bordered-mini-height: 28px !default;
-
-/// fontSize||Font|1
-$--radio-button-font-size: $--font-size-base !default;
-/// color||Color|0
-$--radio-button-checked-background-color: $--color-primary !default;
-/// color||Color|0
-$--radio-button-checked-font-color: $--color-white !default;
-/// color||Color|0
-$--radio-button-checked-border-color: $--color-primary !default;
-$--radio-button-disabled-checked-fill: $--border-color-extra-light !default;
-
-/* Select
--------------------------- */
-$--select-border-color-hover: $--border-color-hover !default;
-$--select-disabled-border: $--disabled-border-base !default;
-/// fontSize||Font|1
-$--select-font-size: $--font-size-base !default;
-$--select-close-hover-color: $--color-text-secondary !default;
-
-$--select-input-color: $--color-text-placeholder !default;
-$--select-multiple-input-color: #666 !default;
-/// color||Color|0
-$--select-input-focus-border-color: $--color-primary !default;
-/// fontSize||Font|1
-$--select-input-font-size: 14px !default;
-
-$--select-option-color: $--color-text-regular !default;
-$--select-option-disabled-color: $--color-text-placeholder !default;
-$--select-option-disabled-background: $--color-white !default;
-/// height||Other|4
-$--select-option-height: 34px !default;
-$--select-option-hover-background: $--background-color-base !default;
-/// color||Color|0
-$--select-option-selected-font-color: $--color-primary !default;
-$--select-option-selected-hover: $--background-color-base !default;
-
-$--select-group-color: $--color-info !default;
-$--select-group-height: 30px !default;
-$--select-group-font-size: 12px !default;
-
-$--select-dropdown-background: $--color-white !default;
-$--select-dropdown-shadow: $--box-shadow-light !default;
-$--select-dropdown-empty-color: #999 !default;
-/// height||Other|4
-$--select-dropdown-max-height: 274px !default;
-$--select-dropdown-padding: 6px 0 !default;
-$--select-dropdown-empty-padding: 10px 0 !default;
-$--select-dropdown-border: solid 1px $--border-color-light !default;
-
-/* Alert
--------------------------- */
-$--alert-padding: 8px 16px !default;
-/// borderRadius||Border|2
-$--alert-border-radius: $--border-radius-base !default;
-/// fontSize||Font|1
-$--alert-title-font-size: 13px !default;
-/// fontSize||Font|1
-$--alert-description-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-customed-font-size: 13px !default;
-
-$--alert-success-color: $--color-success-lighter !default;
-$--alert-info-color: $--color-info-lighter !default;
-$--alert-warning-color: $--color-warning-lighter !default;
-$--alert-danger-color: $--color-danger-lighter !default;
-
-/// height||Other|4
-$--alert-icon-size: 16px !default;
-/// height||Other|4
-$--alert-icon-large-size: 28px !default;
-
-/* MessageBox
--------------------------- */
-/// color||Color|0
-$--messagebox-title-color: $--color-text-primary !default;
-$--msgbox-width: 420px !default;
-$--msgbox-border-radius: 4px !default;
-/// fontSize||Font|1
-$--messagebox-font-size: $--font-size-large !default;
-/// fontSize||Font|1
-$--messagebox-content-font-size: $--font-size-base !default;
-/// color||Color|0
-$--messagebox-content-color: $--color-text-regular !default;
-/// fontSize||Font|1
-$--messagebox-error-font-size: 12px !default;
-$--msgbox-padding-primary: 15px !default;
-/// color||Color|0
-$--messagebox-success-color: $--color-success !default;
-/// color||Color|0
-$--messagebox-info-color: $--color-info !default;
-/// color||Color|0
-$--messagebox-warning-color: $--color-warning !default;
-/// color||Color|0
-$--messagebox-danger-color: $--color-danger !default;
-
-/* Message
--------------------------- */
-$--message-shadow: $--box-shadow-base !default;
-$--message-min-width: 380px !default;
-$--message-background-color: #edf2fc !default;
-$--message-padding: 15px 15px 15px 20px !default;
-/// color||Color|0
-$--message-close-icon-color: $--color-text-placeholder !default;
-/// height||Other|4
-$--message-close-size: 16px !default;
-/// color||Color|0
-$--message-close-hover-color: $--color-text-secondary !default;
-
-/// color||Color|0
-$--message-success-font-color: $--color-success !default;
-/// color||Color|0
-$--message-info-font-color: $--color-info !default;
-/// color||Color|0
-$--message-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--message-danger-font-color: $--color-danger !default;
-
-/* Notification
--------------------------- */
-$--notification-width: 330px !default;
-/// padding||Spacing|3
-$--notification-padding: 14px 26px 14px 13px !default;
-$--notification-radius: 8px !default;
-$--notification-shadow: $--box-shadow-light !default;
-/// color||Color|0
-$--notification-border-color: $--border-color-lighter !default;
-$--notification-icon-size: 24px !default;
-$--notification-close-font-size: $--message-close-size !default;
-$--notification-group-margin-left: 13px !default;
-$--notification-group-margin-right: 8px !default;
-/// fontSize||Font|1
-$--notification-content-font-size: $--font-size-base !default;
-/// color||Color|0
-$--notification-content-color: $--color-text-regular !default;
-/// fontSize||Font|1
-$--notification-title-font-size: 16px !default;
-/// color||Color|0
-$--notification-title-color: $--color-text-primary !default;
-
-/// color||Color|0
-$--notification-close-color: $--color-text-secondary !default;
-/// color||Color|0
-$--notification-close-hover-color: $--color-text-regular !default;
-
-/// color||Color|0
-$--notification-success-icon-color: $--color-success !default;
-/// color||Color|0
-$--notification-info-icon-color: $--color-info !default;
-/// color||Color|0
-$--notification-warning-icon-color: $--color-warning !default;
-/// color||Color|0
-$--notification-danger-icon-color: $--color-danger !default;
-
-/* Input
--------------------------- */
-$--input-font-size: $--font-size-base !default;
-/// color||Color|0
-$--input-font-color: $--color-text-regular !default;
-/// height||Other|4
-$--input-width: 140px !default;
-/// height||Other|4
-$--input-height: 40px !default;
-$--input-border: $--border-base !default;
-$--input-border-color: $--border-color-base !default;
-/// borderRadius||Border|2
-$--input-border-radius: $--border-radius-base !default;
-$--input-border-color-hover: $--border-color-hover !default;
-/// color||Color|0
-$--input-background-color: $--color-white !default;
-$--input-fill-disabled: $--disabled-fill-base !default;
-$--input-color-disabled: $--font-color-disabled-base !default;
-/// color||Color|0
-$--input-icon-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--input-placeholder-color: $--color-text-placeholder !default;
-$--input-max-width: 314px !default;
-
-$--input-hover-border: $--border-color-hover !default;
-$--input-clear-hover-color: $--color-text-secondary !default;
-
-$--input-focus-border: $--color-primary !default;
-$--input-focus-fill: $--color-white !default;
-
-$--input-disabled-fill: $--disabled-fill-base !default;
-$--input-disabled-border: $--disabled-border-base !default;
-$--input-disabled-color: $--disabled-color-base !default;
-$--input-disabled-placeholder-color: $--color-text-placeholder !default;
-
-/// fontSize||Font|1
-$--input-medium-font-size: 14px !default;
-/// height||Other|4
-$--input-medium-height: 36px !default;
-/// fontSize||Font|1
-$--input-small-font-size: 13px !default;
-/// height||Other|4
-$--input-small-height: 32px !default;
-/// fontSize||Font|1
-$--input-mini-font-size: 12px !default;
-/// height||Other|4
-$--input-mini-height: 28px !default;
-
-/* Cascader
--------------------------- */
-/// color||Color|0
-$--cascader-menu-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--cascader-menu-selected-font-color: $--color-primary !default;
-$--cascader-menu-fill: $--fill-base !default;
-$--cascader-menu-font-size: $--font-size-base !default;
-$--cascader-menu-radius: $--border-radius-base !default;
-$--cascader-menu-border: solid 1px $--border-color-light !default;
-$--cascader-menu-shadow: $--box-shadow-light !default;
-$--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled:$--color-text-placeholder !default;
-$--cascader-color-empty:$--color-text-placeholder !default;
-$--cascader-tag-background: #f0f2f5;
-
-/* Group
--------------------------- */
-$--group-option-flex: 0 0 0.2 * 100% !default;
-$--group-option-offset-bottom: 12px !default;
-$--group-option-fill-hover: rgba($--color-black, 0.06) !default;
-$--group-title-color: $--color-black !default;
-$--group-title-font-size: $--font-size-base !default;
-$--group-title-width: 66px !default;
-
-/* Tab
--------------------------- */
-$--tab-font-size: $--font-size-base !default;
-$--tab-border-line: 1px solid #e4e4e4 !default;
-$--tab-header-color-active: $--color-text-secondary !default;
-$--tab-header-color-hover: $--color-text-regular !default;
-$--tab-header-color: $--color-text-regular !default;
-$--tab-header-fill-active: rgba($--color-black, 0.06) !default;
-$--tab-header-fill-hover: rgba($--color-black, 0.06) !default;
-$--tab-vertical-header-width: 90px !default;
-$--tab-vertical-header-count-color: $--color-white !default;
-$--tab-vertical-header-count-fill: $--color-text-secondary !default;
-
 /* Button
 -------------------------- */
 /// fontSize||Font|1
 $--button-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--button-font-weight: $--font-weight-primary !default;
-/// borderRadius||Border|2
-$--button-border-radius: $--border-radius-base !default;
+
+
 /// padding||Spacing|3
 $--button-padding-vertical: 12px !default;
 /// padding||Spacing|3
@@ -547,8 +177,7 @@ $--button-mini-padding-horizontal: 15px !default;
 $--button-default-font-color: $--color-text-regular !default;
 /// color||Color|0
 $--button-default-background-color: $--color-white !default;
-/// color||Color|0
-$--button-default-border-color: $--border-color-base !default;
+
 
 /// color||Color|0
 $--button-disabled-font-color: $--color-text-placeholder !default;
@@ -557,166 +186,6 @@ $--button-disabled-background-color: $--color-white !default;
 /// color||Color|0
 $--button-disabled-border-color: $--border-color-lighter !default;
 
-/// color||Color|0
-$--button-primary-border-color: $--color-primary !default;
-/// color||Color|0
-$--button-primary-font-color: $--color-white !default;
-/// color||Color|0
-$--button-primary-background-color: $--color-primary !default;
-/// color||Color|0
-$--button-success-border-color: $--color-success !default;
-/// color||Color|0
-$--button-success-font-color: $--color-white !default;
-/// color||Color|0
-$--button-success-background-color: $--color-success !default;
-/// color||Color|0
-$--button-warning-border-color: $--color-warning !default;
-/// color||Color|0
-$--button-warning-font-color: $--color-white !default;
-/// color||Color|0
-$--button-warning-background-color: $--color-warning !default;
-/// color||Color|0
-$--button-danger-border-color: $--color-danger !default;
-/// color||Color|0
-$--button-danger-font-color: $--color-white !default;
-/// color||Color|0
-$--button-danger-background-color: $--color-danger !default;
-/// color||Color|0
-$--button-info-border-color: $--color-info !default;
-/// color||Color|0
-$--button-info-font-color: $--color-white !default;
-/// color||Color|0
-$--button-info-background-color: $--color-info !default;
-
-$--button-hover-tint-percent: 20% !default;
-$--button-active-shade-percent: 10% !default;
-
-
-/* cascader
--------------------------- */
-$--cascader-height: 200px !default;
-
-/* Switch
--------------------------- */
-/// color||Color|0
-$--switch-on-color: $--color-primary !default;
-/// color||Color|0
-$--switch-off-color: $--border-color-base !default;
-/// fontSize||Font|1
-$--switch-font-size: $--font-size-base !default;
-$--switch-core-border-radius: 10px !default;
-// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义
-$--switch-width: 40px !default;
-// height||Other|4
-$--switch-height: 20px !default;
-// height||Other|4
-$--switch-button-size: 16px !default;
-
-/* Dialog
--------------------------- */
-$--dialog-background-color: $--color-white !default;
-$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
-/// fontSize||Font|1
-$--dialog-title-font-size: $--font-size-large !default;
-/// fontSize||Font|1
-$--dialog-content-font-size: 14px !default;
-/// fontLineHeight||LineHeight|2
-$--dialog-font-line-height: $--font-line-height-primary !default;
-/// padding||Spacing|3
-$--dialog-padding-primary: 20px !default;
-
-/* Table
--------------------------- */
-/// color||Color|0
-$--table-border-color: $--border-color-lighter !default;
-$--table-border: 1px solid $--table-border-color !default;
-/// color||Color|0
-$--table-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--table-header-font-color: $--color-text-secondary !default;
-/// color||Color|0
-$--table-row-hover-background-color: $--background-color-base !default;
-$--table-current-row-background-color: $--color-primary-light-9 !default;
-/// color||Color|0
-$--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
-
-/* Pagination
--------------------------- */
-/// fontSize||Font|1
-$--pagination-font-size: 13px !default;
-/// color||Color|0
-$--pagination-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-font-color: $--color-text-primary !default;
-$--pagination-border-radius: 3px !default;
-/// color||Color|0
-$--pagination-button-color: $--color-text-primary !default;
-/// height||Other|4
-$--pagination-button-width: 35.5px !default;
-/// height||Other|4
-$--pagination-button-height: 28px !default;
-/// color||Color|0
-$--pagination-button-disabled-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--pagination-button-disabled-background-color: $--color-white !default;
-/// color||Color|0
-$--pagination-hover-color: $--color-primary !default;
-
-/* Popup
--------------------------- */
-/// color||Color|0
-$--popup-modal-background-color: $--color-black !default;
-/// opacity||Other|1
-$--popup-modal-opacity: 0.5 !default;
-
-/* Popover
--------------------------- */
-/// color||Color|0
-$--popover-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--popover-font-size: $--font-size-base !default;
-/// color||Color|0
-$--popover-border-color: $--border-color-lighter !default;
-$--popover-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--popover-padding: 12px !default;
-$--popover-padding-large: 18px 20px !default;
-/// fontSize||Font|1
-$--popover-title-font-size: 16px !default;
-/// color||Color|0
-$--popover-title-font-color: $--color-text-primary !default;
-
-/* Tooltip
--------------------------- */
-/// color|1|Color|0
-$--tooltip-fill: $--color-text-primary !default;
-/// color|1|Color|0
-$--tooltip-color: $--color-white !default;
-/// fontSize||Font|1
-$--tooltip-font-size: 12px !default;
-/// color||Color|0
-$--tooltip-border-color: $--color-text-primary !default;
-$--tooltip-arrow-size: 6px !default;
-/// padding||Spacing|3
-$--tooltip-padding: 10px !default;
-
-/* Tag
--------------------------- */
-/// color||Color|0
-$--tag-info-color: $--color-info !default;
-/// color||Color|0
-$--tag-primary-color: $--color-primary !default;
-/// color||Color|0
-$--tag-success-color: $--color-success !default;
-/// color||Color|0
-$--tag-warning-color: $--color-warning !default;
-/// color||Color|0
-$--tag-danger-color: $--color-danger !default;
-/// fontSize||Font|1
-$--tag-font-size: 12px !default;
-$--tag-border-radius: 4px !default;
-$--tag-padding: 0 10px !default;
 
 /* Tree
 -------------------------- */
@@ -726,305 +195,3 @@ $--tree-node-hover-background-color: $--background-color-base !default;
 $--tree-font-color: $--color-text-regular !default;
 /// color||Color|0
 $--tree-expand-icon-color: $--color-text-placeholder !default;
-
-/* Dropdown
--------------------------- */
-$--dropdown-menu-box-shadow: $--box-shadow-light !default;
-$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default;
-$--dropdown-menuItem-hover-color: $--link-color !default;
-
-/* Badge
--------------------------- */
-/// color||Color|0
-$--badge-background-color: $--color-danger !default;
-$--badge-radius: 10px !default;
-/// fontSize||Font|1
-$--badge-font-size: 12px !default;
-/// padding||Spacing|3
-$--badge-padding: 6px !default;
-/// height||Other|4
-$--badge-size: 18px !default;
-
-/* Card
---------------------------*/
-/// color||Color|0
-$--card-border-color: $--border-color-lighter !default;
-$--card-border-radius: 4px !default;
-/// padding||Spacing|3
-$--card-padding: 20px !default;
-
-/* Slider
---------------------------*/
-/// color||Color|0
-$--slider-main-background-color: $--color-primary !default;
-/// color||Color|0
-$--slider-runway-background-color: $--border-color-light !default;
-$--slider-button-hover-color: mix($--color-primary, black, 97%) !default;
-$--slider-stop-background-color: $--color-white !default;
-$--slider-disable-color: $--color-text-placeholder !default;
-$--slider-margin: 16px 0 !default;
-$--slider-border-radius: 3px !default;
-/// height|1|Other|4
-$--slider-height: 6px !default;
-/// height||Other|4
-$--slider-button-size: 16px !default;
-$--slider-button-wrapper-size: 36px !default;
-$--slider-button-wrapper-offset: -15px !default;
-
-/* Steps
---------------------------*/
-$--steps-border-color: $--disabled-border-base !default;
-$--steps-border-radius: 4px !default;
-$--steps-padding: 20px !default;
-
-/* Menu
---------------------------*/
-/// fontSize||Font|1
-$--menu-item-font-size: $--font-size-base !default;
-/// color||Color|0
-$--menu-item-font-color: $--color-text-primary !default;
-/// color||Color|0
-$--menu-background-color: $--color-white !default;
-$--menu-item-hover-fill: $--color-primary-light-9 !default;
-
-/* Rate
---------------------------*/
-$--rate-height: 20px !default;
-/// fontSize||Font|1
-$--rate-font-size: $--font-size-base !default;
-/// height||Other|3
-$--rate-icon-size: 18px !default;
-/// margin||Spacing|2
-$--rate-icon-margin: 6px !default;
-$--rate-icon-color: $--color-text-placeholder !default;
-
-/* DatePicker
---------------------------*/
-$--datepicker-font-color: $--color-text-regular !default;
-/// color|1|Color|0
-$--datepicker-off-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--datepicker-header-font-color: $--color-text-regular !default;
-$--datepicker-icon-color: $--color-text-primary !default;
-$--datepicker-border-color: $--disabled-border-base !default;
-$--datepicker-inner-border-color: #e4e4e4 !default;
-/// color||Color|0
-$--datepicker-inrange-background-color: $--border-color-extra-light !default;
-/// color||Color|0
-$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default;
-/// color||Color|0
-$--datepicker-active-color: $--color-primary !default;
-/// color||Color|0
-$--datepicker-hover-font-color: $--color-primary !default;
-$--datepicker-cell-hover-color: #fff !default;
-
-/* Loading
---------------------------*/
-/// height||Other|4
-$--loading-spinner-size: 42px !default;
-/// height||Other|4
-$--loading-fullscreen-spinner-size: 50px !default;
-
-/* Scrollbar
---------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
-$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
-
-/* Carousel
---------------------------*/
-/// fontSize||Font|1
-$--carousel-arrow-font-size: 12px !default;
-$--carousel-arrow-size: 36px !default;
-$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default;
-$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default;
-/// width||Other|4
-$--carousel-indicator-width: 30px !default;
-/// height||Other|4
-$--carousel-indicator-height: 2px !default;
-$--carousel-indicator-padding-horizontal: 4px !default;
-$--carousel-indicator-padding-vertical: 12px !default;
-$--carousel-indicator-out-color: $--border-color-hover !default;
-
-/* Collapse
---------------------------*/
-/// color||Color|0
-$--collapse-border-color: $--border-color-lighter !default;
-/// height||Other|4
-$--collapse-header-height: 48px !default;
-/// color||Color|0
-$--collapse-header-background-color: $--color-white !default;
-/// color||Color|0
-$--collapse-header-font-color: $--color-text-primary !default;
-/// fontSize||Font|1
-$--collapse-header-font-size: 13px !default;
-/// color||Color|0
-$--collapse-content-background-color: $--color-white !default;
-/// fontSize||Font|1
-$--collapse-content-font-size: 13px !default;
-/// color||Color|0
-$--collapse-content-font-color: $--color-text-primary !default;
-
-/* Transfer
---------------------------*/
-$--transfer-border-color: $--border-color-lighter !default;
-$--transfer-border-radius: $--border-radius-base !default;
-/// height||Other|4
-$--transfer-panel-width: 200px !default;
-/// height||Other|4
-$--transfer-panel-header-height: 40px !default;
-/// color||Color|0
-$--transfer-panel-header-background-color: $--background-color-base !default;
-/// height||Other|4
-$--transfer-panel-footer-height: 40px !default;
-/// height||Other|4
-$--transfer-panel-body-height: 246px !default;
-/// height||Other|4
-$--transfer-item-height: 30px !default;
-/// height||Other|4
-$--transfer-filter-height: 32px !default;
-
-/* Header
-  --------------------------*/
-$--header-padding: 0 20px !default;
-
-/* Footer
---------------------------*/
-$--footer-padding: 0 20px !default;
-
-/* Main
---------------------------*/
-$--main-padding: 20px !default;
-
-/* Timeline
---------------------------*/
-$--timeline-node-size-normal: 12px !default;
-$--timeline-node-size-large: 14px !default;
-$--timeline-node-color: $--border-color-light !default;
-
-/* Backtop
---------------------------*/
-/// color||Color|0
-$--backtop-background-color: $--color-white !default;
-/// color||Color|0
-$--backtop-font-color: $--color-primary !default;
-/// color||Color|0
-$--backtop-hover-background-color: $--border-color-extra-light !default;
-
-/* Link
---------------------------*/
-/// fontSize||Font|1
-$--link-font-size: $--font-size-base !default;
-/// fontWeight||Font|1
-$--link-font-weight: $--font-weight-primary !default;
-/// color||Color|0
-$--link-default-font-color: $--color-text-regular !default;
-/// color||Color|0
-$--link-default-active-color: $--color-primary !default;
-/// color||Color|0
-$--link-disabled-font-color: $--color-text-placeholder !default;
-/// color||Color|0
-$--link-primary-font-color: $--color-primary !default;
-/// color||Color|0
-$--link-success-font-color: $--color-success !default;
-/// color||Color|0
-$--link-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--link-danger-font-color: $--color-danger !default;
-/// color||Color|0
-$--link-info-font-color: $--color-info !default;
-/* Calendar
---------------------------*/
-/// border||Other|4
-$--calendar-border: $--table-border !default;
-/// color||Other|4
-$--calendar-selected-background-color: #F2F8FE !default;
-$--calendar-cell-width: 85px !default;
-
-/* Form
--------------------------- */
-/// fontSize||Font|1
-$--form-label-font-size: $--font-size-base !default;
-
-/* Avatar
---------------------------*/
-/// color||Color|0
-$--avatar-font-color: #fff !default;
-/// color||Color|0
-$--avatar-background-color: #C0C4CC !default;
-/// fontSize||Font Size|1
-$--avatar-text-font-size: 14px !default;
-/// fontSize||Font Size|1
-$--avatar-icon-font-size: 18px !default;
-/// borderRadius||Border|2
-$--avatar-border-radius: $--border-radius-base !default;
-/// size|1|Avatar Size|3
-$--avatar-large-size: 40px !default;
-/// size|1|Avatar Size|3
-$--avatar-medium-size: 36px !default;
-/// size|1|Avatar Size|3
-$--avatar-small-size: 28px !default;
-
-/* Empty
--------------------------- */
-$--empty-padding: 40px 0 !default;
-$--empty-image-width: 160px !default;
-$--empty-description-margin-top: 20px !default;
-$--empty-bottom-margin-top: 20px !default;
-
-/* Descriptions
--------------------------- */
-$--descriptions-header-margin-bottom: 20px !default;
-$--descriptions-title-font-size: 16px !default;
-$--descriptions-table-border: 1px solid $--border-color-lighter !default;
-$--descriptions-item-bordered-label-background: #fafafa !default;
-
-/* Skeleton 
---------------------------*/
-$--skeleton-color: #f2f2f2 !default;
-$--skeleton-to-color: #e6e6e6 !default;
-
-/* Svg
---------------- */
-$--svg-monochrome-grey: #DCDDE0 !default;
-
-/* Result
--------------------------- */
-$--result-padding: 40px 30px !default;
-$--result-icon-font-size: 64px !default;
-$--result-title-font-size: 20px !default;
-$--result-title-margin-top: 20px !default;
-$--result-subtitle-margin-top: 10px !default;
-$--result-extra-margin-top: 30px !default;
-$--result-info-color: $--color-info !default;
-$--result-success-color: $--color-success !default;
-$--result-warning-color: $--color-warning !default;
-$--result-danger-color: $--color-danger !default;
-
-/* Break-point
---------------------------*/
-$--sm: 768px !default;
-$--md: 992px !default;
-$--lg: 1200px !default;
-$--xl: 1920px !default;
-
-$--breakpoints: (
-  'xs' : (max-width: $--sm - 1),
-  'sm' : (min-width: $--sm),
-  'md' : (min-width: $--md),
-  'lg' : (min-width: $--lg),
-  'xl' : (min-width: $--xl)
-);
-
-$--breakpoints-spec: (
-  'xs-only' : (max-width: $--sm - 1),
-  'sm-and-up' : (min-width: $--sm),
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
-  'sm-and-down': (max-width: $--md - 1),
-  'md-and-up' : (min-width: $--md),
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
-  'md-and-down': (max-width: $--lg - 1),
-  'lg-and-up' : (min-width: $--lg),
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
-  'lg-and-down': (max-width: $--xl - 1),
-  'xl-only' : (min-width: $--xl),
-);
diff --git a/src/assets/icon.scss b/src/assets/icon.scss
index 81c8a8b..dde8d03 100644
--- a/src/assets/icon.scss
+++ b/src/assets/icon.scss
@@ -1,1169 +1,37 @@
 @import "common/var";
-@font-face {
-    font-family: 'element-icons';
-    src: url('#{$--font-path}/element-icons.woff') format('woff'),
-    /* chrome, firefox */
-    url('#{$--font-path}/element-icons.ttf') format('truetype');
-    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-    font-weight: normal;
-    font-display: $--font-display;
-    font-style: normal;
-}
-
-[class^="el-icon-"],
-[class*=" el-icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'element-icons' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    vertical-align: baseline;
-    display: inline-block;
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.el-icon-ice-cream-round:before {
-    content: "\e6a0";
-}
-
-.el-icon-ice-cream-square:before {
-    content: "\e6a3";
-}
-
-.el-icon-lollipop:before {
-    content: "\e6a4";
-}
-
-.el-icon-potato-strips:before {
-    content: "\e6a5";
-}
-
-.el-icon-milk-tea:before {
-    content: "\e6a6";
-}
-
-.el-icon-ice-drink:before {
-    content: "\e6a7";
-}
-
-.el-icon-ice-tea:before {
-    content: "\e6a9";
-}
-
-.el-icon-coffee:before {
-    content: "\e6aa";
-}
-
-.el-icon-orange:before {
-    content: "\e6ab";
-}
-
-.el-icon-pear:before {
-    content: "\e6ac";
-}
-
-.el-icon-apple:before {
-    content: "\e6ad";
-}
-
-.el-icon-cherry:before {
-    content: "\e6ae";
-}
-
-.el-icon-watermelon:before {
-    content: "\e6af";
-}
-
-.el-icon-grape:before {
-    content: "\e6b0";
-}
-
-.el-icon-refrigerator:before {
-    content: "\e6b1";
-}
-
-.el-icon-goblet-square-full:before {
-    content: "\e6b2";
-}
-
-.el-icon-goblet-square:before {
-    content: "\e6b3";
-}
-
-.el-icon-goblet-full:before {
-    content: "\e6b4";
-}
-
-.el-icon-goblet:before {
-    content: "\e6b5";
-}
-
-.el-icon-cold-drink:before {
-    content: "\e6b6";
-}
-
-.el-icon-coffee-cup:before {
-    content: "\e6b8";
-}
-
-.el-icon-water-cup:before {
-    content: "\e6b9";
-}
-
-.el-icon-hot-water:before {
-    content: "\e6ba";
-}
-
-.el-icon-ice-cream:before {
-    content: "\e6bb";
-}
-
-.el-icon-dessert:before {
-    content: "\e6bc";
-}
-
-.el-icon-sugar:before {
-    content: "\e6bd";
-}
-
-.el-icon-tableware:before {
-    content: "\e6be";
-}
-
-.el-icon-burger:before {
-    content: "\e6bf";
-}
-
-.el-icon-knife-fork:before {
-    content: "\e6c1";
-}
-
-.el-icon-fork-spoon:before {
-    content: "\e6c2";
-}
-
-.el-icon-chicken:before {
-    content: "\e6c3";
-}
-
-.el-icon-food:before {
-    content: "\e6c4";
-}
-
-.el-icon-dish-1:before {
-    content: "\e6c5";
-}
-
-.el-icon-dish:before {
-    content: "\e6c6";
-}
-
-.el-icon-moon-night:before {
-    content: "\e6ee";
-}
-
-.el-icon-moon:before {
-    content: "\e6f0";
-}
-
-.el-icon-cloudy-and-sunny:before {
-    content: "\e6f1";
-}
-
-.el-icon-partly-cloudy:before {
-    content: "\e6f2";
-}
-
-.el-icon-cloudy:before {
-    content: "\e6f3";
-}
-
-.el-icon-sunny:before {
-    content: "\e6f6";
-}
-
-.el-icon-sunset:before {
-    content: "\e6f7";
-}
-
-.el-icon-sunrise-1:before {
-    content: "\e6f8";
-}
-
-.el-icon-sunrise:before {
-    content: "\e6f9";
-}
-
-.el-icon-heavy-rain:before {
-    content: "\e6fa";
-}
-
-.el-icon-lightning:before {
-    content: "\e6fb";
-}
-
-.el-icon-light-rain:before {
-    content: "\e6fc";
-}
-
-.el-icon-wind-power:before {
-    content: "\e6fd";
-}
-
-.el-icon-baseball:before {
-    content: "\e712";
-}
-
-.el-icon-soccer:before {
-    content: "\e713";
-}
-
-.el-icon-football:before {
-    content: "\e715";
-}
-
-.el-icon-basketball:before {
-    content: "\e716";
-}
-
-.el-icon-ship:before {
-    content: "\e73f";
-}
-
-.el-icon-truck:before {
-    content: "\e740";
-}
-
-.el-icon-bicycle:before {
-    content: "\e741";
-}
-
-.el-icon-mobile-phone:before {
-    content: "\e6d3";
-}
-
-.el-icon-service:before {
-    content: "\e6d4";
-}
-
-.el-icon-key:before {
-    content: "\e6e2";
-}
-
-.el-icon-unlock:before {
-    content: "\e6e4";
-}
-
-.el-icon-lock:before {
-    content: "\e6e5";
-}
-
-.el-icon-watch:before {
-    content: "\e6fe";
-}
-
-.el-icon-watch-1:before {
-    content: "\e6ff";
-}
-
-.el-icon-timer:before {
-    content: "\e702";
-}
-
-.el-icon-alarm-clock:before {
-    content: "\e703";
-}
-
-.el-icon-map-location:before {
-    content: "\e704";
-}
-
-.el-icon-delete-location:before {
-    content: "\e705";
-}
-
-.el-icon-add-location:before {
-    content: "\e706";
-}
-
-.el-icon-location-information:before {
-    content: "\e707";
-}
-
-.el-icon-location-outline:before {
-    content: "\e708";
-}
-
-.el-icon-location:before {
-    content: "\e79e";
-}
-
-.el-icon-place:before {
-    content: "\e709";
-}
-
-.el-icon-discover:before {
-    content: "\e70a";
-}
-
-.el-icon-first-aid-kit:before {
-    content: "\e70b";
-}
-
-.el-icon-trophy-1:before {
-    content: "\e70c";
-}
-
-.el-icon-trophy:before {
-    content: "\e70d";
-}
-
-.el-icon-medal:before {
-    content: "\e70e";
-}
-
-.el-icon-medal-1:before {
-    content: "\e70f";
-}
-
-.el-icon-stopwatch:before {
-    content: "\e710";
-}
-
-.el-icon-mic:before {
-    content: "\e711";
-}
-
-.el-icon-copy-document:before {
-    content: "\e718";
-}
-
-.el-icon-full-screen:before {
-    content: "\e719";
-}
-
-.el-icon-switch-button:before {
-    content: "\e71b";
-}
-
-.el-icon-aim:before {
-    content: "\e71c";
-}
-
-.el-icon-crop:before {
-    content: "\e71d";
-}
-
-.el-icon-odometer:before {
-    content: "\e71e";
-}
-
-.el-icon-time:before {
-    content: "\e71f";
-}
-
-.el-icon-bangzhu:before {
-    content: "\e724";
-}
-
-.el-icon-close-notification:before {
-    content: "\e726";
-}
-
-.el-icon-microphone:before {
-    content: "\e727";
-}
-
-.el-icon-turn-off-microphone:before {
-    content: "\e728";
-}
-
-.el-icon-position:before {
-    content: "\e729";
-}
-
-.el-icon-postcard:before {
-    content: "\e72a";
-}
-
-.el-icon-message:before {
-    content: "\e72b";
-}
-
-.el-icon-chat-line-square:before {
-    content: "\e72d";
-}
-
-.el-icon-chat-dot-square:before {
-    content: "\e72e";
-}
-
-.el-icon-chat-dot-round:before {
-    content: "\e72f";
-}
-
-.el-icon-chat-square:before {
-    content: "\e730";
-}
-
-.el-icon-chat-line-round:before {
-    content: "\e731";
-}
-
-.el-icon-chat-round:before {
-    content: "\e732";
-}
-
-.el-icon-set-up:before {
-    content: "\e733";
-}
-
-.el-icon-turn-off:before {
-    content: "\e734";
-}
-
-.el-icon-open:before {
-    content: "\e735";
-}
-
-.el-icon-connection:before {
-    content: "\e736";
-}
-
-.el-icon-link:before {
-    content: "\e737";
-}
-
-.el-icon-cpu:before {
-    content: "\e738";
-}
-
-.el-icon-thumb:before {
-    content: "\e739";
-}
-
-.el-icon-female:before {
-    content: "\e73a";
-}
-
-.el-icon-male:before {
-    content: "\e73b";
-}
-
-.el-icon-guide:before {
-    content: "\e73c";
-}
-
-.el-icon-news:before {
-    content: "\e73e";
-}
-
-.el-icon-price-tag:before {
-    content: "\e744";
-}
-
-.el-icon-discount:before {
-    content: "\e745";
-}
-
-.el-icon-wallet:before {
-    content: "\e747";
-}
-
-.el-icon-coin:before {
-    content: "\e748";
-}
-
-.el-icon-money:before {
-    content: "\e749";
-}
-
-.el-icon-bank-card:before {
-    content: "\e74a";
-}
-
-.el-icon-box:before {
-    content: "\e74b";
-}
-
-.el-icon-present:before {
-    content: "\e74c";
-}
-
-.el-icon-sell:before {
-    content: "\e6d5";
-}
-
-.el-icon-sold-out:before {
-    content: "\e6d6";
-}
-
-.el-icon-shopping-bag-2:before {
-    content: "\e74d";
-}
-
-.el-icon-shopping-bag-1:before {
-    content: "\e74e";
-}
-
-.el-icon-shopping-cart-2:before {
-    content: "\e74f";
-}
-
-.el-icon-shopping-cart-1:before {
-    content: "\e750";
-}
-
-.el-icon-shopping-cart-full:before {
-    content: "\e751";
-}
-
-.el-icon-smoking:before {
-    content: "\e752";
-}
-
-.el-icon-no-smoking:before {
-    content: "\e753";
-}
-
-.el-icon-house:before {
-    content: "\e754";
-}
-
-.el-icon-table-lamp:before {
-    content: "\e755";
-}
-
-.el-icon-school:before {
-    content: "\e756";
-}
-
-.el-icon-office-building:before {
-    content: "\e757";
-}
-
-.el-icon-toilet-paper:before {
-    content: "\e758";
-}
-
-.el-icon-notebook-2:before {
-    content: "\e759";
-}
-
-.el-icon-notebook-1:before {
-    content: "\e75a";
-}
-
-.el-icon-files:before {
-    content: "\e75b";
-}
-
-.el-icon-collection:before {
-    content: "\e75c";
-}
-
-.el-icon-receiving:before {
-    content: "\e75d";
-}
-
-.el-icon-suitcase-1:before {
-    content: "\e760";
-}
-
-.el-icon-suitcase:before {
-    content: "\e761";
-}
-
-.el-icon-film:before {
-    content: "\e763";
-}
-
-.el-icon-collection-tag:before {
-    content: "\e765";
-}
-
-.el-icon-data-analysis:before {
-    content: "\e766";
-}
-
-.el-icon-pie-chart:before {
-    content: "\e767";
-}
-
-.el-icon-data-board:before {
-    content: "\e768";
-}
-
-.el-icon-data-line:before {
-    content: "\e76d";
-}
-
-.el-icon-reading:before {
-    content: "\e769";
-}
-
-.el-icon-magic-stick:before {
-    content: "\e76a";
-}
-
-.el-icon-coordinate:before {
-    content: "\e76b";
-}
-
-.el-icon-mouse:before {
-    content: "\e76c";
-}
-
-.el-icon-brush:before {
-    content: "\e76e";
-}
-
-.el-icon-headset:before {
-    content: "\e76f";
-}
-
-.el-icon-umbrella:before {
-    content: "\e770";
-}
-
-.el-icon-scissors:before {
-    content: "\e771";
-}
-
-.el-icon-mobile:before {
-    content: "\e773";
-}
 
-.el-icon-attract:before {
-    content: "\e774";
-}
-
-.el-icon-monitor:before {
-    content: "\e775";
-}
-
-.el-icon-search:before {
-    content: "\e778";
-}
-
-.el-icon-takeaway-box:before {
-    content: "\e77a";
-}
-
-.el-icon-paperclip:before {
-    content: "\e77d";
-}
-
-.el-icon-printer:before {
-    content: "\e77e";
-}
-
-.el-icon-document-add:before {
-    content: "\e782";
-}
-
-.el-icon-document:before {
-    content: "\e785";
-}
-
-.el-icon-document-checked:before {
-    content: "\e786";
-}
-
-.el-icon-document-copy:before {
-    content: "\e787";
-}
-
-.el-icon-document-delete:before {
-    content: "\e788";
-}
-
-.el-icon-document-remove:before {
-    content: "\e789";
-}
-
-.el-icon-tickets:before {
-    content: "\e78b";
-}
-
-.el-icon-folder-checked:before {
-    content: "\e77f";
-}
-
-.el-icon-folder-delete:before {
-    content: "\e780";
-}
-
-.el-icon-folder-remove:before {
-    content: "\e781";
-}
-
-.el-icon-folder-add:before {
-    content: "\e783";
-}
-
-.el-icon-folder-opened:before {
-    content: "\e784";
-}
-
-.el-icon-folder:before {
-    content: "\e78a";
-}
-
-.el-icon-edit-outline:before {
-    content: "\e764";
-}
-
-.el-icon-edit:before {
-    content: "\e78c";
-}
-
-.el-icon-date:before {
-    content: "\e78e";
-}
-
-.el-icon-c-scale-to-original:before {
-    content: "\e7c6";
-}
-
-.el-icon-view:before {
-    content: "\e6ce";
-}
-
-.el-icon-loading:before {
-    content: "\e6cf";
-}
-
-.el-icon-rank:before {
-    content: "\e6d1";
-}
-
-.el-icon-sort-down:before {
-    content: "\e7c4";
-}
-
-.el-icon-sort-up:before {
-    content: "\e7c5";
-}
-
-.el-icon-sort:before {
-    content: "\e6d2";
-}
-
-.el-icon-finished:before {
-    content: "\e6cd";
-}
-
-.el-icon-refresh-left:before {
-    content: "\e6c7";
-}
-
-.el-icon-refresh-right:before {
-    content: "\e6c8";
-}
-
-.el-icon-refresh:before {
-    content: "\e6d0";
-}
-
-.el-icon-video-play:before {
-    content: "\e7c0";
-}
-
-.el-icon-video-pause:before {
-    content: "\e7c1";
-}
-
-.el-icon-d-arrow-right:before {
-    content: "\e6dc";
-}
-
-.el-icon-d-arrow-left:before {
-    content: "\e6dd";
-}
-
-.el-icon-arrow-up:before {
-    content: "\e6e1";
-}
-
-.el-icon-arrow-down:before {
-    content: "\e6df";
-}
-
-.el-icon-arrow-right:before {
-    content: "\e6e0";
-}
-
-.el-icon-arrow-left:before {
-    content: "\e6de";
-}
-
-.el-icon-top-right:before {
-    content: "\e6e7";
-}
-
-.el-icon-top-left:before {
-    content: "\e6e8";
-}
-
-.el-icon-top:before {
-    content: "\e6e6";
-}
-
-.el-icon-bottom:before {
-    content: "\e6eb";
-}
-
-.el-icon-right:before {
-    content: "\e6e9";
-}
-
-.el-icon-back:before {
-    content: "\e6ea";
-}
-
-.el-icon-bottom-right:before {
-    content: "\e6ec";
-}
-
-.el-icon-bottom-left:before {
-    content: "\e6ed";
+@font-face {
+  font-family: 'element-icons';
+  src: url('#{$--font-path}/element-icons.woff') format('woff'),
+  /* chrome, firefox */
+  url('#{$--font-path}/element-icons.ttf') format('truetype');
+  /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  font-weight: normal;
+  font-display: $--font-display;
+  font-style: normal;
 }
 
-.el-icon-caret-top:before {
-    content: "\e78f";
+[class^="el-icon-"],
+[class*=" el-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'element-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: baseline;
+  display: inline-block;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .el-icon-caret-bottom:before {
-    content: "\e790";
+  content: "\e790";
 }
 
 .el-icon-caret-right:before {
-    content: "\e791";
-}
-
-.el-icon-caret-left:before {
-    content: "\e792";
-}
-
-.el-icon-d-caret:before {
-    content: "\e79a";
-}
-
-.el-icon-share:before {
-    content: "\e793";
-}
-
-.el-icon-menu:before {
-    content: "\e798";
-}
-
-.el-icon-s-grid:before {
-    content: "\e7a6";
-}
-
-.el-icon-s-check:before {
-    content: "\e7a7";
-}
-
-.el-icon-s-data:before {
-    content: "\e7a8";
-}
-
-.el-icon-s-opportunity:before {
-    content: "\e7aa";
-}
-
-.el-icon-s-custom:before {
-    content: "\e7ab";
-}
-
-.el-icon-s-claim:before {
-    content: "\e7ad";
-}
-
-.el-icon-s-finance:before {
-    content: "\e7ae";
-}
-
-.el-icon-s-comment:before {
-    content: "\e7af";
-}
-
-.el-icon-s-flag:before {
-    content: "\e7b0";
-}
-
-.el-icon-s-marketing:before {
-    content: "\e7b1";
-}
-
-.el-icon-s-shop:before {
-    content: "\e7b4";
-}
-
-.el-icon-s-open:before {
-    content: "\e7b5";
-}
-
-.el-icon-s-management:before {
-    content: "\e7b6";
-}
-
-.el-icon-s-ticket:before {
-    content: "\e7b7";
-}
-
-.el-icon-s-release:before {
-    content: "\e7b8";
-}
-
-.el-icon-s-home:before {
-    content: "\e7b9";
-}
-
-.el-icon-s-promotion:before {
-    content: "\e7ba";
-}
-
-.el-icon-s-operation:before {
-    content: "\e7bb";
-}
-
-.el-icon-s-unfold:before {
-    content: "\e7bc";
-}
-
-.el-icon-s-fold:before {
-    content: "\e7a9";
-}
-
-.el-icon-s-platform:before {
-    content: "\e7bd";
-}
-
-.el-icon-s-order:before {
-    content: "\e7be";
-}
-
-.el-icon-s-cooperation:before {
-    content: "\e7bf";
-}
-
-.el-icon-bell:before {
-    content: "\e725";
-}
-
-.el-icon-message-solid:before {
-    content: "\e799";
-}
-
-.el-icon-video-camera:before {
-    content: "\e772";
-}
-
-.el-icon-video-camera-solid:before {
-    content: "\e796";
-}
-
-.el-icon-camera:before {
-    content: "\e779";
-}
-
-.el-icon-camera-solid:before {
-    content: "\e79b";
-}
-
-.el-icon-download:before {
-    content: "\e77c";
-}
-
-.el-icon-upload2:before {
-    content: "\e77b";
-}
-
-.el-icon-upload:before {
-    content: "\e7c3";
-}
-
-.el-icon-picture-outline-round:before {
-    content: "\e75f";
-}
-
-.el-icon-picture-outline:before {
-    content: "\e75e";
-}
-
-.el-icon-picture:before {
-    content: "\e79f";
-}
-
-.el-icon-close:before {
-    content: "\e6db";
-}
-
-.el-icon-check:before {
-    content: "\e6da";
-}
-
-.el-icon-plus:before {
-    content: "\e6d9";
-}
-
-.el-icon-minus:before {
-    content: "\e6d8";
-}
-
-.el-icon-help:before {
-    content: "\e73d";
-}
-
-.el-icon-s-help:before {
-    content: "\e7b3";
-}
-
-.el-icon-circle-close:before {
-    content: "\e78d";
-}
-
-.el-icon-circle-check:before {
-    content: "\e720";
-}
-
-.el-icon-circle-plus-outline:before {
-    content: "\e723";
-}
-
-.el-icon-remove-outline:before {
-    content: "\e722";
-}
-
-.el-icon-zoom-out:before {
-    content: "\e776";
-}
-
-.el-icon-zoom-in:before {
-    content: "\e777";
-}
-
-.el-icon-error:before {
-    content: "\e79d";
-}
-
-.el-icon-success:before {
-    content: "\e79c";
-}
-
-.el-icon-circle-plus:before {
-    content: "\e7a0";
-}
-
-.el-icon-remove:before {
-    content: "\e7a2";
-}
-
-.el-icon-info:before {
-    content: "\e7a1";
-}
-
-.el-icon-question:before {
-    content: "\e7a4";
-}
-
-.el-icon-warning-outline:before {
-    content: "\e6c9";
-}
-
-.el-icon-warning:before {
-    content: "\e7a3";
-}
-
-.el-icon-goods:before {
-    content: "\e7c2";
-}
-
-.el-icon-s-goods:before {
-    content: "\e7b2";
-}
-
-.el-icon-star-off:before {
-    content: "\e717";
-}
-
-.el-icon-star-on:before {
-    content: "\e797";
-}
-
-.el-icon-more-outline:before {
-    content: "\e6cc";
-}
-
-.el-icon-more:before {
-    content: "\e794";
-}
-
-.el-icon-phone-outline:before {
-    content: "\e6cb";
-}
-
-.el-icon-phone:before {
-    content: "\e795";
-}
-
-.el-icon-user:before {
-    content: "\e6e3";
-}
-
-.el-icon-user-solid:before {
-    content: "\e7a5";
-}
-
-.el-icon-setting:before {
-    content: "\e6ca";
-}
-
-.el-icon-s-tools:before {
-    content: "\e7ac";
-}
-
-.el-icon-delete:before {
-    content: "\e6d7";
-}
-
-.el-icon-delete-solid:before {
-    content: "\e7c9";
-}
-
-.el-icon-eleme:before {
-    content: "\e7c7";
-}
-
-.el-icon-platform-eleme:before {
-    content: "\e7ca";
-}
-
-.el-icon-loading {
-    animation: rotating 2s linear infinite;
-}
-
-.el-icon--right {
-    margin-left: 5px;
-}
-
-.el-icon--left {
-    margin-right: 5px;
+  content: "\e791";
 }
-
-@keyframes rotating {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    100% {
-        transform: rotateZ(360deg);
-    }
-}
\ No newline at end of file
diff --git a/src/assets/index.scss b/src/assets/index.scss
index e18d5ad..3d302c1 100644
--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@@ -1,3 +1,4 @@
-@import "./base.scss";
+@import "common/transition.scss";
+@import "icon.scss";
 @import "./checkbox.scss";
 @import "./tree.scss";
\ No newline at end of file