diff --git a/src/components/element-ui/BackToTop/index.vue b/src/components/element-ui/BackToTop/index.vue
deleted file mode 100644
index 12ea3ea8..00000000
--- a/src/components/element-ui/BackToTop/index.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <transition :name="transitionName">
-    <div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
-      <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
-        <title>回到顶部</title>
-        <g>
-          <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd"/>
-        </g>
-      </svg>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'BackToTop',
-  props: {
-    visibilityHeight: {
-      type: Number,
-      default: 400
-    },
-    backPosition: {
-      type: Number,
-      default: 0
-    },
-    customStyle: {
-      type: Object,
-      default: function() {
-        return {
-          right: '50px',
-          bottom: '50px',
-          width: '40px',
-          height: '40px',
-          'border-radius': '4px',
-          'line-height': '45px',
-          background: '#e7eaf1'
-        }
-      }
-    },
-    transitionName: {
-      type: String,
-      default: 'fade'
-    }
-  },
-  data: function() {
-    return {
-      visible: false,
-      interval: null,
-      isMoving: false
-    }
-  },
-  mounted() {
-    window.addEventListener('scroll', this.handleScroll)
-  },
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll)
-    if (this.interval) {
-      clearInterval(this.interval)
-    }
-  },
-  methods: {
-    handleScroll() {
-      this.visible = window.pageYOffset > this.visibilityHeight
-    },
-    backToTop() {
-      if (this.isMoving) return
-      const start = window.pageYOffset
-      let i = 0
-      this.isMoving = true
-      this.interval = setInterval(() => {
-        const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500))
-        if (next <= this.backPosition) {
-          window.scrollTo(0, this.backPosition)
-          clearInterval(this.interval)
-          this.isMoving = false
-        } else {
-          window.scrollTo(0, next)
-        }
-        i++
-      }, 16.7)
-    },
-    easeInOutQuad(t, b, c, d) {
-      if ((t /= d / 2) < 1) return c / 2 * t * t + b
-      return -c / 2 * (--t * (t - 2) - 1) + b
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .back-to-ceiling {
-    position: fixed;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  .back-to-ceiling:hover {
-    background: #d5dbe7;
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity .5s;
-  }
-
-  .fade-enter,
-  .fade-leave-to {
-    opacity: 0
-  }
-
-  .back-to-ceiling .Icon {
-    fill: #9aaabf;
-    background: none;
-  }
-</style>
diff --git a/src/components/element-ui/Breadcrumb/index.vue b/src/components/element-ui/Breadcrumb/index.vue
deleted file mode 100644
index a4e171df..00000000
--- a/src/components/element-ui/Breadcrumb/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{
-        generateTitle(item.meta.title) }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
-</template>
-
-<script>
-import { generateTitle } from '@/utils/i18n'
-import pathToRegexp from 'path-to-regexp'
-
-export default {
-  data: function() {
-    return {
-      levelList: null
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    generateTitle,
-    getBreadcrumb() {
-      let matched = this.$route.matched.filter(item => item.name)
-
-      const first = matched[0]
-      if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
-      }
-
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-    },
-    pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
-    },
-    handleLink(item) {
-      const { redirect, path } = item
-      if (redirect) {
-        this.$router.push(redirect)
-        return
-      }
-      this.$router.push(this.pathCompile(path))
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 8px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
-  }
-</style>
diff --git a/src/components/element-ui/Charts/keyboard.vue b/src/components/element-ui/Charts/keyboard.vue
deleted file mode 100644
index fd116904..00000000
--- a/src/components/element-ui/Charts/keyboard.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"/>
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data: function() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-
-      const xAxisData = []
-      const data = []
-      const data2 = []
-      for (let i = 0; i < 50; i++) {
-        xAxisData.push(i)
-        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
-        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
-      }
-      this.chart.setOption(
-        {
-          backgroundColor: '#08263a',
-          grid: {
-            left: '5%',
-            right: '5%'
-          },
-          xAxis: [{
-            show: false,
-            data: xAxisData
-          }, {
-            show: false,
-            data: xAxisData
-          }],
-          visualMap: {
-            show: false,
-            min: 0,
-            max: 50,
-            dimension: 0,
-            inRange: {
-              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-            }
-          },
-          yAxis: {
-            axisLine: {
-              show: false
-            },
-            axisLabel: {
-              textStyle: {
-                color: '#4a657a'
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#08263f'
-              }
-            },
-            axisTick: {
-              show: false
-            }
-          },
-          series: [{
-            name: 'back',
-            type: 'bar',
-            data: data2,
-            z: 1,
-            itemStyle: {
-              normal: {
-                opacity: 0.4,
-                barBorderRadius: 5,
-                shadowBlur: 3,
-                shadowColor: '#111'
-              }
-            }
-          }, {
-            name: 'Simulate Shadow',
-            type: 'line',
-            data,
-            z: 2,
-            showSymbol: false,
-            animationDelay: 0,
-            animationEasing: 'linear',
-            animationDuration: 1200,
-            lineStyle: {
-              normal: {
-                color: 'transparent'
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: '#08263a',
-                shadowBlur: 50,
-                shadowColor: '#000'
-              }
-            }
-          }, {
-            name: 'front',
-            type: 'bar',
-            data,
-            xAxisIndex: 1,
-            z: 3,
-            itemStyle: {
-              normal: {
-                barBorderRadius: 5
-              }
-            }
-          }],
-          animationEasing: 'elasticOut',
-          animationEasingUpdate: 'elasticOut',
-          animationDelay(idx) {
-            return idx * 20
-          },
-          animationDelayUpdate(idx) {
-            return idx * 20
-          }
-        })
-    }
-  }
-}
-</script>
diff --git a/src/components/element-ui/Charts/lineMarker.vue b/src/components/element-ui/Charts/lineMarker.vue
deleted file mode 100644
index fb6f7ec5..00000000
--- a/src/components/element-ui/Charts/lineMarker.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"/>
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data: function() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-
-      this.chart.setOption({
-        backgroundColor: '#394056',
-        title: {
-          top: 20,
-          text: 'Requests',
-          textStyle: {
-            fontWeight: 'normal',
-            fontSize: 16,
-            color: '#F1F1F3'
-          },
-          left: '1%'
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          }
-        },
-        legend: {
-          top: 20,
-          icon: 'rect',
-          itemWidth: 14,
-          itemHeight: 5,
-          itemGap: 13,
-          data: ['CMCC', 'CTCC', 'CUCC'],
-          right: '4%',
-          textStyle: {
-            fontSize: 12,
-            color: '#F1F1F3'
-          }
-        },
-        grid: {
-          top: 100,
-          left: '2%',
-          right: '2%',
-          bottom: '2%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
-        }],
-        yAxis: [{
-          type: 'value',
-          name: '(%)',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          },
-          axisLabel: {
-            margin: 10,
-            textStyle: {
-              fontSize: 14
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: '#57617B'
-            }
-          }
-        }],
-        series: [{
-          name: 'CMCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(137, 189, 27, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(137, 189, 27, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(137,189,27)',
-              borderColor: 'rgba(137,189,2,0.27)',
-              borderWidth: 12
-
-            }
-          },
-          data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
-        }, {
-          name: 'CTCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(0, 136, 212, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(0, 136, 212, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(0,136,212)',
-              borderColor: 'rgba(0,136,212,0.2)',
-              borderWidth: 12
-
-            }
-          },
-          data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
-        }, {
-          name: 'CUCC',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 1
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: 'rgba(219, 50, 51, 0.3)'
-              }, {
-                offset: 0.8,
-                color: 'rgba(219, 50, 51, 0)'
-              }], false),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10
-            }
-          },
-          itemStyle: {
-            normal: {
-              color: 'rgb(219,50,51)',
-              borderColor: 'rgba(219,50,51,0.2)',
-              borderWidth: 12
-            }
-          },
-          data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
-        }]
-      })
-    }
-  }
-}
-</script>
diff --git a/src/components/element-ui/Charts/mixChart.vue b/src/components/element-ui/Charts/mixChart.vue
deleted file mode 100644
index b7397032..00000000
--- a/src/components/element-ui/Charts/mixChart.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<template>
-  <div :class="className" :id="id" :style="{height:height,width:width}"/>
-</template>
-
-<script>
-import echarts from 'echarts'
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
-  },
-  data: function() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.initChart()
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.getElementById(this.id))
-      const xData = (function() {
-        const data = []
-        for (let i = 1; i < 13; i++) {
-          data.push(i + 'month')
-        }
-        return data
-      }())
-      this.chart.setOption({
-        backgroundColor: '#344b58',
-        title: {
-          text: 'statistics',
-          x: '20',
-          top: '20',
-          textStyle: {
-            color: '#fff',
-            fontSize: '22'
-          },
-          subtextStyle: {
-            color: '#90979c',
-            fontSize: '16'
-          }
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            textStyle: {
-              color: '#fff'
-            }
-          }
-        },
-        grid: {
-          left: '5%',
-          right: '5%',
-          borderWidth: 0,
-          top: 150,
-          bottom: 95,
-          textStyle: {
-            color: '#fff'
-          }
-        },
-        legend: {
-          x: '5%',
-          top: '10%',
-          textStyle: {
-            color: '#90979c'
-          },
-          data: ['female', 'male', 'average']
-        },
-        calculable: true,
-        xAxis: [{
-          type: 'category',
-          axisLine: {
-            lineStyle: {
-              color: '#90979c'
-            }
-          },
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          splitArea: {
-            show: false
-          },
-          axisLabel: {
-            interval: 0
-
-          },
-          data: xData
-        }],
-        yAxis: [{
-          type: 'value',
-          splitLine: {
-            show: false
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#90979c'
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            interval: 0
-          },
-          splitArea: {
-            show: false
-          }
-        }],
-        dataZoom: [{
-          show: true,
-          height: 30,
-          xAxisIndex: [
-            0
-          ],
-          bottom: 30,
-          start: 10,
-          end: 80,
-          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-          handleSize: '110%',
-          handleStyle: {
-            color: '#d3dee5'
-
-          },
-          textStyle: {
-            color: '#fff' },
-          borderColor: '#90979c'
-
-        }, {
-          type: 'inside',
-          show: true,
-          height: 15,
-          start: 1,
-          end: 35
-        }],
-        series: [{
-          name: 'female',
-          type: 'bar',
-          stack: 'total',
-          barMaxWidth: 35,
-          barGap: '10%',
-          itemStyle: {
-            normal: {
-              color: 'rgba(255,144,128,1)',
-              label: {
-                show: true,
-                textStyle: {
-                  color: '#fff'
-                },
-                position: 'insideTop',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            709,
-            1917,
-            2455,
-            2610,
-            1719,
-            1433,
-            1544,
-            3285,
-            5208,
-            3372,
-            2484,
-            4078
-          ]
-        },
-
-        {
-          name: 'male',
-          type: 'bar',
-          stack: 'total',
-          itemStyle: {
-            normal: {
-              color: 'rgba(0,191,183,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            327,
-            1776,
-            507,
-            1200,
-            800,
-            482,
-            204,
-            1390,
-            1001,
-            951,
-            381,
-            220
-          ]
-        }, {
-          name: 'average',
-          type: 'line',
-          stack: 'total',
-          symbolSize: 10,
-          symbol: 'circle',
-          itemStyle: {
-            normal: {
-              color: 'rgba(252,230,48,1)',
-              barBorderRadius: 0,
-              label: {
-                show: true,
-                position: 'top',
-                formatter(p) {
-                  return p.value > 0 ? p.value : ''
-                }
-              }
-            }
-          },
-          data: [
-            1036,
-            3693,
-            2962,
-            3810,
-            2519,
-            1915,
-            1748,
-            4675,
-            6209,
-            4323,
-            2865,
-            4298
-          ]
-        }
-        ]
-      })
-    }
-  }
-}
-</script>
diff --git a/src/components/element-ui/Charts/mixins/resize.js b/src/components/element-ui/Charts/mixins/resize.js
deleted file mode 100644
index cc7b8399..00000000
--- a/src/components/element-ui/Charts/mixins/resize.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { debounce } from '@/utils'
-
-export default {
-  data: function() {
-    return {
-      sidebarElm: null
-    }
-  },
-  mounted() {
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize()
-      }
-    }, 100)
-    window.addEventListener('resize', this.__resizeHandler)
-
-    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.__resizeHandler)
-
-    this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
-  },
-  methods: {
-    sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.__resizeHandler()
-      }
-    }
-  }
-}
diff --git a/src/components/element-ui/DndList/index.vue b/src/components/element-ui/DndList/index.vue
deleted file mode 100644
index 7587daa7..00000000
--- a/src/components/element-ui/DndList/index.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <div class="dndList">
-    <div :style="{width:width1}" class="dndList-list">
-      <h3>{{ list1Title }}</h3>
-      <draggable :list="list1" :options="{group:'article'}" class="dragArea">
-        <div v-for="element in list1" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle">{{ element.id }}[{{ element.author }}] {{ element.title }}</div>
-          <div style="position:absolute;right:0px;">
-            <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
-              <i style="color:#ff4949" class="el-icon-delete"/>
-            </span>
-          </div>
-        </div>
-      </draggable>
-    </div>
-    <div :style="{width:width2}" class="dndList-list">
-      <h3>{{ list2Title }}</h3>
-      <draggable :list="list2" :options="{group:'article'}" class="dragArea">
-        <div v-for="element in list2" :key="element.id" class="list-complete-item">
-          <div class="list-complete-item-handle2" @click="pushEle(element)">{{ element.id }} [{{ element.author }}] {{ element.title }}</div>
-        </div>
-      </draggable>
-    </div>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable'
-
-export default {
-  name: 'DndList',
-  components: { draggable },
-  props: {
-    list1: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    list2: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    list1Title: {
-      type: String,
-      default: 'list1'
-    },
-    list2Title: {
-      type: String,
-      default: 'list2'
-    },
-    width1: {
-      type: String,
-      default: '48%'
-    },
-    width2: {
-      type: String,
-      default: '48%'
-    }
-  },
-  methods: {
-    isNotInList1(v) {
-      return this.list1.every(k => v.id !== k.id)
-    },
-    isNotInList2(v) {
-      return this.list2.every(k => v.id !== k.id)
-    },
-    deleteEle(ele) {
-      for (const item of this.list1) {
-        if (item.id === ele.id) {
-          const index = this.list1.indexOf(item)
-          this.list1.splice(index, 1)
-          break
-        }
-      }
-      if (this.isNotInList2(ele)) {
-        this.list2.unshift(ele)
-      }
-    },
-    pushEle(ele) {
-      for (const item of this.list2) {
-        if (item.id === ele.id) {
-          const index = this.list2.indexOf(item)
-          this.list2.splice(index, 1)
-          break
-        }
-      }
-      if (this.isNotInList1(ele)) {
-        this.list1.push(ele)
-      }
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.dndList {
-  background: #fff;
-  padding-bottom: 40px;
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-  .dndList-list {
-    float: left;
-    padding-bottom: 30px;
-    &:first-of-type {
-      margin-right: 2%;
-    }
-    .dragArea {
-      margin-top: 15px;
-      min-height: 50px;
-      padding-bottom: 30px;
-    }
-  }
-}
-
-.list-complete-item {
-  cursor: pointer;
-  position: relative;
-  font-size: 14px;
-  padding: 5px 12px;
-  margin-top: 4px;
-  border: 1px solid #bfcbd9;
-  transition: all 1s;
-}
-
-.list-complete-item-handle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 50px;
-}
-
-.list-complete-item-handle2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 20px;
-}
-
-.list-complete-item.sortable-chosen {
-  background: #4AB7BD;
-}
-
-.list-complete-item.sortable-ghost {
-  background: #30B08F;
-}
-
-.list-complete-enter,
-.list-complete-leave-active {
-  opacity: 0;
-}
-</style>
diff --git a/src/components/element-ui/DragSelect/index.vue b/src/components/element-ui/DragSelect/index.vue
deleted file mode 100644
index 513be006..00000000
--- a/src/components/element-ui/DragSelect/index.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners">
-    <slot/>
-  </el-select>
-</template>
-
-<script>
-import Sortable from 'sortablejs'
-
-export default {
-  name: 'DragSelect',
-  props: {
-    value: {
-      type: Array,
-      required: true
-    }
-  },
-  computed: {
-    selectVal: {
-      get() {
-        return [...this.value]
-      },
-      set(val) {
-        this.$emit('input', [...val])
-      }
-    }
-  },
-  mounted() {
-    this.setSort()
-  },
-  methods: {
-    setSort() {
-      const el = this.$refs.dragSelect.$el.querySelectorAll('.el-select__tags > span')[0]
-      this.sortable = Sortable.create(el, {
-        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-        setData: function(dataTransfer) {
-          dataTransfer.setData('Text', '')
-          // to avoid Firefox bug
-          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
-        },
-        onEnd: evt => {
-          const targetRow = this.value.splice(evt.oldIndex, 1)[0]
-          this.value.splice(evt.newIndex, 0, targetRow)
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.drag-select >>> .sortable-ghost{
-  opacity: .8;
-  color: #fff!important;
-  background: #42b983!important;
-}
-
-.drag-select >>> .el-tag{
-  cursor: pointer;
-}
-</style>
diff --git a/src/components/element-ui/Dropzone/index.vue b/src/components/element-ui/Dropzone/index.vue
deleted file mode 100644
index 187f7f70..00000000
--- a/src/components/element-ui/Dropzone/index.vue
+++ /dev/null
@@ -1,297 +0,0 @@
-<template>
-  <div :ref="id" :action="url" :id="id" class="dropzone">
-    <input type="file" name="file">
-  </div>
-</template>
-
-<script>
-import Dropzone from 'dropzone'
-import 'dropzone/dist/dropzone.css'
-// import { getToken } from 'api/qiniu';
-
-Dropzone.autoDiscover = false
-
-export default {
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    url: {
-      type: String,
-      required: true
-    },
-    clickable: {
-      type: Boolean,
-      default: true
-    },
-    defaultMsg: {
-      type: String,
-      default: '上传图片'
-    },
-    acceptedFiles: {
-      type: String,
-      default: ''
-    },
-    thumbnailHeight: {
-      type: Number,
-      default: 200
-    },
-    thumbnailWidth: {
-      type: Number,
-      default: 200
-    },
-    showRemoveLink: {
-      type: Boolean,
-      default: true
-    },
-    maxFilesize: {
-      type: Number,
-      default: 2
-    },
-    maxFiles: {
-      type: Number,
-      default: 3
-    },
-    autoProcessQueue: {
-      type: Boolean,
-      default: true
-    },
-    useCustomDropzoneOptions: {
-      type: Boolean,
-      default: false
-    },
-    defaultImg: {
-      default: '',
-      type: [String, Array]
-    },
-    couldPaste: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data: function() {
-    return {
-      dropzone: '',
-      initOnce: true
-    }
-  },
-  watch: {
-    defaultImg(val) {
-      if (val.length === 0) {
-        this.initOnce = false
-        return
-      }
-      if (!this.initOnce) return
-      this.initImages(val)
-      this.initOnce = false
-    }
-  },
-  mounted() {
-    const element = document.getElementById(this.id)
-    const vm = this
-    this.dropzone = new Dropzone(element, {
-      clickable: this.clickable,
-      thumbnailWidth: this.thumbnailWidth,
-      thumbnailHeight: this.thumbnailHeight,
-      maxFiles: this.maxFiles,
-      maxFilesize: this.maxFilesize,
-      dictRemoveFile: 'Remove',
-      addRemoveLinks: this.showRemoveLink,
-      acceptedFiles: this.acceptedFiles,
-      autoProcessQueue: this.autoProcessQueue,
-      dictDefaultMessage: '<i style="margin-top: 3em;display: inline-block" class="material-icons">' + this.defaultMsg + '</i><br>Drop files here to upload',
-      dictMaxFilesExceeded: '只能一个图',
-      previewTemplate: '<div class="dz-preview dz-file-preview">  <div class="dz-image" style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" ><img style="width:' + this.thumbnailWidth + 'px;height:' + this.thumbnailHeight + 'px" data-dz-thumbnail /></div>  <div class="dz-details"><div class="dz-size"><span data-dz-size></span></div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>  <div class="dz-error-message"><span data-dz-errormessage></span></div>  <div class="dz-success-mark"> <i class="material-icons">done</i> </div>  <div class="dz-error-mark"><i class="material-icons">error</i></div></div>',
-      init() {
-        const val = vm.defaultImg
-        if (!val) return
-        if (Array.isArray(val)) {
-          if (val.length === 0) return
-          val.map((v, i) => {
-            const mockFile = { name: 'name' + i, size: 12345, url: v }
-            this.options.addedfile.call(this, mockFile)
-            this.options.thumbnail.call(this, mockFile, v)
-            mockFile.previewElement.classList.add('dz-success')
-            mockFile.previewElement.classList.add('dz-complete')
-            vm.initOnce = false
-            return true
-          })
-        } else {
-          const mockFile = { name: 'name', size: 12345, url: val }
-          this.options.addedfile.call(this, mockFile)
-          this.options.thumbnail.call(this, mockFile, val)
-          mockFile.previewElement.classList.add('dz-success')
-          mockFile.previewElement.classList.add('dz-complete')
-          vm.initOnce = false
-        }
-      },
-      accept: (file, done) => {
-        /* 七牛*/
-        // const token = this.$store.getters.token;
-        // getToken(token).then(response => {
-        //   file.token = response.data.qiniu_token;
-        //   file.key = response.data.qiniu_key;
-        //   file.url = response.data.qiniu_url;
-        //   done();
-        // })
-        done()
-      },
-      sending: (file, xhr, formData) => {
-        // formData.append('token', file.token);
-        // formData.append('key', file.key);
-        vm.initOnce = false
-      }
-    })
-
-    if (this.couldPaste) {
-      document.addEventListener('paste', this.pasteImg)
-    }
-
-    this.dropzone.on('success', file => {
-      vm.$emit('dropzone-success', file, vm.dropzone.element)
-    })
-    this.dropzone.on('addedfile', file => {
-      vm.$emit('dropzone-fileAdded', file)
-    })
-    this.dropzone.on('removedfile', file => {
-      vm.$emit('dropzone-removedFile', file)
-    })
-    this.dropzone.on('error', (file, error, xhr) => {
-      vm.$emit('dropzone-error', file, error, xhr)
-    })
-    this.dropzone.on('successmultiple', (file, error, xhr) => {
-      vm.$emit('dropzone-successmultiple', file, error, xhr)
-    })
-  },
-  destroyed() {
-    document.removeEventListener('paste', this.pasteImg)
-    this.dropzone.destroy()
-  },
-  methods: {
-    removeAllFiles() {
-      this.dropzone.removeAllFiles(true)
-    },
-    processQueue() {
-      this.dropzone.processQueue()
-    },
-    pasteImg(event) {
-      const items = (event.clipboardData || event.originalEvent.clipboardData).items
-      if (items[0].kind === 'file') {
-        this.dropzone.addFile(items[0].getAsFile())
-      }
-    },
-    initImages(val) {
-      if (!val) return
-      if (Array.isArray(val)) {
-        val.map((v, i) => {
-          const mockFile = { name: 'name' + i, size: 12345, url: v }
-          this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-          this.dropzone.options.thumbnail.call(this.dropzone, mockFile, v)
-          mockFile.previewElement.classList.add('dz-success')
-          mockFile.previewElement.classList.add('dz-complete')
-          return true
-        })
-      } else {
-        const mockFile = { name: 'name', size: 12345, url: val }
-        this.dropzone.options.addedfile.call(this.dropzone, mockFile)
-        this.dropzone.options.thumbnail.call(this.dropzone, mockFile, val)
-        mockFile.previewElement.classList.add('dz-success')
-        mockFile.previewElement.classList.add('dz-complete')
-      }
-    }
-
-  }
-}
-</script>
-
-<style scoped>
-    .dropzone {
-        border: 2px solid #E5E5E5;
-        font-family: 'Roboto', sans-serif;
-        color: #777;
-        transition: background-color .2s linear;
-        padding: 5px;
-    }
-
-    .dropzone:hover {
-        background-color: #F6F6F6;
-    }
-
-    i {
-        color: #CCC;
-    }
-
-    .dropzone .dz-image img {
-        width: 100%;
-        height: 100%;
-    }
-
-    .dropzone input[name='file'] {
-        display: none;
-    }
-
-    .dropzone .dz-preview .dz-image {
-        border-radius: 0px;
-    }
-
-    .dropzone .dz-preview:hover .dz-image img {
-        transform: none;
-        -webkit-filter: none;
-        width: 100%;
-        height: 100%;
-    }
-
-    .dropzone .dz-preview .dz-details {
-        bottom: 0px;
-        top: 0px;
-        color: white;
-        background-color: rgba(33, 150, 243, 0.8);
-        transition: opacity .2s linear;
-        text-align: left;
-    }
-
-    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
-        background-color: transparent;
-    }
-
-    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
-        border: none;
-    }
-
-    .dropzone .dz-preview .dz-details .dz-filename:hover span {
-        background-color: transparent;
-        border: none;
-    }
-
-    .dropzone .dz-preview .dz-remove {
-        position: absolute;
-        z-index: 30;
-        color: white;
-        margin-left: 15px;
-        padding: 10px;
-        top: inherit;
-        bottom: 15px;
-        border: 2px white solid;
-        text-decoration: none;
-        text-transform: uppercase;
-        font-size: 0.8rem;
-        font-weight: 800;
-        letter-spacing: 1.1px;
-        opacity: 0;
-    }
-
-    .dropzone .dz-preview:hover .dz-remove {
-        opacity: 1;
-    }
-
-    .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
-        margin-left: -40px;
-        margin-top: -50px;
-    }
-
-    .dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
-        color: white;
-        font-size: 5rem;
-    }
-</style>
diff --git a/src/components/element-ui/ErrorLog/index.vue b/src/components/element-ui/ErrorLog/index.vue
deleted file mode 100644
index 793d4e24..00000000
--- a/src/components/element-ui/ErrorLog/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div v-if="errorLogs.length>0">
-    <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
-      <el-button style="padding: 8px 10px;" size="small" type="danger">
-        <svg-icon icon-class="bug" />
-      </el-button>
-    </el-badge>
-
-    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%">
-      <el-table :data="errorLogs" border>
-        <el-table-column label="Message">
-          <template slot-scope="scope">
-            <div>
-              <span class="message-title">Msg:</span>
-              <el-tag type="danger">{{ scope.row.err.message }}</el-tag>
-            </div>
-            <br>
-            <div>
-              <span class="message-title" style="padding-right: 10px;">Info: </span>
-              <el-tag type="warning">{{ scope.row.vm.$vnode.tag }} error in {{ scope.row.info }}</el-tag>
-            </div>
-            <br>
-            <div>
-              <span class="message-title" style="padding-right: 16px;">Url: </span>
-              <el-tag type="success">{{ scope.row.url }}</el-tag>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="Stack">
-          <template slot-scope="scope">
-            {{ scope.row.err.stack }}
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ErrorLog',
-  data: function() {
-    return {
-      dialogTableVisible: false
-    }
-  },
-  computed: {
-    errorLogs() {
-      return this.$store.getters.errorLogs
-    }
-  }
-}
-</script>
-
-<style scoped>
-.message-title {
-  font-size: 16px;
-  color: #333;
-  font-weight: bold;
-  padding-right: 8px;
-}
-</style>
diff --git a/src/components/element-ui/GithubCorner/index.vue b/src/components/element-ui/GithubCorner/index.vue
deleted file mode 100644
index b5da8874..00000000
--- a/src/components/element-ui/GithubCorner/index.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
-    <svg
-      width="80"
-      height="80"
-      viewBox="0 0 250 250"
-      style="fill:#40c9c6; color:#fff;"
-      aria-hidden="true">
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/>
-      <path
-        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-        fill="currentColor"
-        style="transform-origin: 130px 106px;"
-        class="octo-arm"/>
-      <path
-        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-        fill="currentColor"
-        class="octo-body"/>
-    </svg>
-  </a>
-</template>
-
-<style scoped>
-.github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
-}
-
-@keyframes octocat-wave {
-  0%,
-  100% {
-    transform: rotate(0)
-  }
-  20%,
-  60% {
-    transform: rotate(-25deg)
-  }
-  40%,
-  80% {
-    transform: rotate(10deg)
-  }
-}
-
-@media (max-width:500px) {
-  .github-corner:hover .octo-arm {
-    animation: none
-  }
-  .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
-  }
-}
-</style>
diff --git a/src/components/element-ui/HeaderSearch/index.vue b/src/components/element-ui/HeaderSearch/index.vue
deleted file mode 100644
index fdee688a..00000000
--- a/src/components/element-ui/HeaderSearch/index.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <div :class="{'show':show}" class="header-search">
-    <svg-icon class-name="search-icon" icon-class="search" @click="click" />
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="Search"
-      class="header-search-select"
-      @change="change">
-      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')"/>
-    </el-select>
-  </div>
-</template>
-
-<script>
-import Fuse from 'fuse.js'
-import path from 'path'
-import i18n from '@/lang'
-
-export default {
-  name: 'HeaderSearch',
-  data: function() {
-    return {
-      search: '',
-      options: [],
-      searchPool: [],
-      show: false,
-      fuse: undefined
-    }
-  },
-  computed: {
-    routers() {
-      return this.$store.getters.permission_routers
-    },
-    lang() {
-      return this.$store.getters.language
-    }
-  },
-  watch: {
-    lang() {
-      this.searchPool = this.generateRouters(this.routers)
-    },
-    routers() {
-      this.searchPool = this.generateRouters(this.routers)
-    },
-    searchPool(list) {
-      this.initFuse(list)
-    },
-    show(value) {
-      if (value) {
-        document.body.addEventListener('click', this.close)
-      } else {
-        document.body.removeEventListener('click', this.close)
-      }
-    }
-  },
-  mounted() {
-    this.searchPool = this.generateRouters(this.routers)
-  },
-  methods: {
-    click() {
-      this.show = !this.show
-      if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
-      }
-    },
-    close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
-      this.options = []
-      this.show = false
-    },
-    change(val) {
-      this.$router.push(val.path)
-      this.search = ''
-      this.options = []
-      this.$nextTick(() => {
-        this.show = false
-      })
-    },
-    initFuse(list) {
-      this.fuse = new Fuse(list, {
-        shouldSort: true,
-        threshold: 0.4,
-        location: 0,
-        distance: 100,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        keys: [{
-          name: 'title',
-          weight: 0.7
-        }, {
-          name: 'path',
-          weight: 0.3
-        }]
-      })
-    },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
-    generateRouters(routers, basePath = '/', prefixTitle = []) {
-      let res = []
-
-      for (const router of routers) {
-        // skip hidden router
-        if (router.hidden) { continue }
-
-        const data = {
-          path: path.resolve(basePath, router.path),
-          title: [...prefixTitle]
-        }
-
-        if (router.meta && router.meta.title) {
-          // generate internationalized title
-          const i18ntitle = i18n.t(`route.${router.meta.title}`)
-
-          data.title = [...data.title, i18ntitle]
-
-          if (router.redirect !== 'noredirect') {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
-            res.push(data)
-          }
-        }
-
-        // recursive child routers
-        if (router.children) {
-          const tempRouters = this.generateRouters(router.children, data.path, data.title)
-          if (tempRouters.length >= 1) {
-            res = [...res, ...tempRouters]
-          }
-        }
-      }
-      return res
-    },
-    querySearch(query) {
-      if (query !== '') {
-        this.options = this.fuse.search(query)
-      } else {
-        this.options = []
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.header-search {
-  font-size: 0 !important;
-
-  .search-icon {
-    cursor: pointer;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-
-  .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
-
-    /deep/ .el-input__inner {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-    }
-  }
-
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
-    }
-  }
-}
-</style>
diff --git a/src/components/element-ui/ImageCropper/index.vue b/src/components/element-ui/ImageCropper/index.vue
deleted file mode 100644
index 007c12aa..00000000
--- a/src/components/element-ui/ImageCropper/index.vue
+++ /dev/null
@@ -1,1420 +0,0 @@
-<template>
-  <div v-show="value" class="vue-image-crop-upload">
-    <div class="vicp-wrap">
-      <div class="vicp-close" @click="off">
-        <i class="vicp-icon4"/>
-      </div>
-
-      <div v-show="step == 1" class="vicp-step1">
-        <div class="vicp-drop-area" @dragleave="preventDefault" @dragover="preventDefault" @dragenter="preventDefault" @click="handleClick" @drop="handleChange">
-          <i v-show="loading != 1" class="vicp-icon1">
-            <i class="vicp-icon1-arrow"/>
-            <i class="vicp-icon1-body"/>
-            <i class="vicp-icon1-bottom"/>
-          </i>
-          <span v-show="loading !== 1" class="vicp-hint">{{ lang.hint }}</span>
-          <span v-show="!isSupported" class="vicp-no-supported-hint">{{ lang.noSupported }}</span>
-          <input v-show="false" v-if="step == 1" ref="fileinput" type="file" @change="handleChange">
-        </div>
-        <div v-show="hasError" class="vicp-error">
-          <i class="vicp-icon2"/> {{ errorMsg }}
-        </div>
-        <div class="vicp-operate">
-          <a @click="off" @mousedown="ripple">{{ lang.btn.off }}</a>
-        </div>
-      </div>
-
-      <div v-if="step == 2" class="vicp-step2">
-        <div class="vicp-crop">
-          <div v-show="true" class="vicp-crop-left">
-            <div class="vicp-img-container">
-              <img
-                ref="img"
-                :src="sourceImgUrl"
-                :style="sourceImgStyle"
-                class="vicp-img"
-                draggable="false"
-                @drag="preventDefault"
-                @dragstart="preventDefault"
-                @dragend="preventDefault"
-                @dragleave="preventDefault"
-                @dragover="preventDefault"
-                @dragenter="preventDefault"
-                @drop="preventDefault"
-                @touchstart="imgStartMove"
-                @touchmove="imgMove"
-                @touchend="createImg"
-                @touchcancel="createImg"
-                @mousedown="imgStartMove"
-                @mousemove="imgMove"
-                @mouseup="createImg"
-                @mouseout="createImg">
-              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-1"/>
-              <div :style="sourceImgShadeStyle" class="vicp-img-shade vicp-img-shade-2"/>
-            </div>
-
-            <div class="vicp-range">
-              <input :value="scale.range" type="range" step="1" min="0" max="100" @input="zoomChange">
-              <i class="vicp-icon5" @mousedown="startZoomSub" @mouseout="endZoomSub" @mouseup="endZoomSub"/>
-              <i class="vicp-icon6" @mousedown="startZoomAdd" @mouseout="endZoomAdd" @mouseup="endZoomAdd"/>
-            </div>
-
-            <div v-if="!noRotate" class="vicp-rotate">
-              <i @mousedown="startRotateLeft" @mouseout="endRotate" @mouseup="endRotate">↺</i>
-              <i @mousedown="startRotateRight" @mouseout="endRotate" @mouseup="endRotate">↻</i>
-            </div>
-          </div>
-          <div v-show="true" class="vicp-crop-right">
-            <div class="vicp-preview">
-              <div v-if="!noSquare" class="vicp-preview-item">
-                <img :src="createImgUrl" :style="previewStyle">
-                <span>{{ lang.preview }}</span>
-              </div>
-              <div v-if="!noCircle" class="vicp-preview-item vicp-preview-item-circle">
-                <img :src="createImgUrl" :style="previewStyle">
-                <span>{{ lang.preview }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="vicp-operate">
-          <a @click="setStep(1)" @mousedown="ripple">{{ lang.btn.back }}</a>
-          <a class="vicp-operate-btn" @click="prepareUpload" @mousedown="ripple">{{ lang.btn.save }}</a>
-        </div>
-      </div>
-
-      <div v-if="step == 3" class="vicp-step3">
-        <div class="vicp-upload">
-          <span v-show="loading === 1" class="vicp-loading">{{ lang.loading }}</span>
-          <div class="vicp-progress-wrap">
-            <span v-show="loading === 1" :style="progressStyle" class="vicp-progress"/>
-          </div>
-          <div v-show="hasError" class="vicp-error">
-            <i class="vicp-icon2"/> {{ errorMsg }}
-          </div>
-          <div v-show="loading === 2" class="vicp-success">
-            <i class="vicp-icon3"/> {{ lang.success }}
-          </div>
-        </div>
-        <div class="vicp-operate">
-          <a @click="setStep(2)" @mousedown="ripple">{{ lang.btn.back }}</a>
-          <a @click="off" @mousedown="ripple">{{ lang.btn.close }}</a>
-        </div>
-      </div>
-      <canvas v-show="false" ref="canvas" :width="width" :height="height"/>
-    </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable */
-'use strict'
-import request from '@/utils/request'
-import language from './utils/language.js'
-import mimes from './utils/mimes.js'
-import data2blob from './utils/data2blob.js'
-import effectRipple from './utils/effectRipple.js'
-export default {
-  props: {
-    // 域，上传文件name，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
-    field: {
-      type: String,
-      'default': 'avatar'
-    },
-    // 原名key，类似于id，触发事件会带上（如果一个页面多个图片上传控件，可以做区分
-    ki: {
-      'default': 0
-    },
-    // 显示该控件与否
-    value: {
-      'default': true
-    },
-    // 上传地址
-    url: {
-      type: String,
-      'default': ''
-    },
-    // 其他要上传文件附带的数据，对象格式
-    params: {
-      type: Object,
-      'default': null
-    },
-    // Add custom headers
-    headers: {
-      type: Object,
-      'default': null
-    },
-    // 剪裁图片的宽
-    width: {
-      type: Number,
-      default: 200
-    },
-    // 剪裁图片的高
-    height: {
-      type: Number,
-      default: 200
-    },
-    // 不显示旋转功能
-    noRotate: {
-      type: Boolean,
-      default: true
-    },
-    // 不预览圆形图片
-    noCircle: {
-      type: Boolean,
-      default: false
-    },
-    // 不预览方形图片
-    noSquare: {
-      type: Boolean,
-      default: false
-    },
-    // 单文件大小限制
-    maxSize: {
-      type: Number,
-      'default': 10240
-    },
-    // 语言类型
-    langType: {
-      type: String,
-      'default': 'zh'
-    },
-    // 语言包
-    langExt: {
-      type: Object,
-      'default': null
-    },
-    // 图片上传格式
-    imgFormat: {
-      type: String,
-      'default': 'png'
-    },
-    // 是否支持跨域
-    withCredentials: {
-      type: Boolean,
-      'default': false
-    }
-  },
-  data: function() {
-    const that = this
-    const {
-      imgFormat,
-      langType,
-      langExt,
-      width,
-      height
-    } = that
-    let isSupported = true
-    const allowImgFormat = [
-      'jpg',
-      'png'
-    ]
-    const tempImgFormat = allowImgFormat.indexOf(imgFormat) === -1 ? 'jpg' : imgFormat
-    const lang = language[langType] ? language[langType] : language['en']
-    const mime = mimes[tempImgFormat]
-    // 规范图片格式
-    that.imgFormat = tempImgFormat
-    if (langExt) {
-      Object.assign(lang, langExt)
-    }
-    if (typeof FormData !== 'function') {
-      isSupported = false
-    }
-    return {
-      // 图片的mime
-      mime,
-      // 语言包
-      lang,
-      // 浏览器是否支持该控件
-      isSupported,
-      // 浏览器是否支持触屏事件
-      isSupportTouch: document.hasOwnProperty('ontouchstart'),
-      // 步骤
-      step: 1, // 1选择文件 2剪裁 3上传
-      // 上传状态及进度
-      loading: 0, // 0未开始 1正在 2成功 3错误
-      progress: 0,
-      // 是否有错误及错误信息
-      hasError: false,
-      errorMsg: '',
-      // 需求图宽高比
-      ratio: width / height,
-      // 原图地址、生成图片地址
-      sourceImg: null,
-      sourceImgUrl: '',
-      createImgUrl: '',
-      // 原图片拖动事件初始值
-      sourceImgMouseDown: {
-        on: false,
-        mX: 0, // 鼠标按下的坐标
-        mY: 0,
-        x: 0, // scale原图坐标
-        y: 0
-      },
-      // 生成图片预览的容器大小
-      previewContainer: {
-        width: 100,
-        height: 100
-      },
-      // 原图容器宽高
-      sourceImgContainer: { // sic
-        width: 240,
-        height: 184 // 如果生成图比例与此一致会出现bug，先改成特殊的格式吧，哈哈哈
-      },
-      // 原图展示属性
-      scale: {
-        zoomAddOn: false, // 按钮缩放事件开启
-        zoomSubOn: false, // 按钮缩放事件开启
-        range: 1, // 最大100
-        rotateLeft: false, // 按钮向左旋转事件开启
-        rotateRight: false, // 按钮向右旋转事件开启
-        degree: 0, // 旋转度数
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-        maxWidth: 0,
-        maxHeight: 0,
-        minWidth: 0, // 最宽
-        minHeight: 0,
-        naturalWidth: 0, // 原宽
-        naturalHeight: 0
-      }
-    }
-  },
-  computed: {
-    // 进度条样式
-    progressStyle() {
-      const {
-        progress
-      } = this
-      return {
-        width: progress + '%'
-      }
-    },
-    // 原图样式
-    sourceImgStyle() {
-      const {
-        scale,
-        sourceImgMasking
-      } = this
-      const top = scale.y + sourceImgMasking.y + 'px'
-      const left = scale.x + sourceImgMasking.x + 'px'
-      return {
-        top,
-        left,
-        width: scale.width + 'px',
-        height: scale.height + 'px',
-        transform: 'rotate(' + scale.degree + 'deg)', // 旋转时 左侧原始图旋转样式
-        '-ms-transform': 'rotate(' + scale.degree + 'deg)', // 兼容IE9
-        '-moz-transform': 'rotate(' + scale.degree + 'deg)', // 兼容FireFox
-        '-webkit-transform': 'rotate(' + scale.degree + 'deg)', // 兼容Safari 和 chrome
-        '-o-transform': 'rotate(' + scale.degree + 'deg)' // 兼容 Opera
-      }
-    },
-    // 原图蒙版属性
-    sourceImgMasking() {
-      const {
-        width,
-        height,
-        ratio,
-        sourceImgContainer
-      } = this
-      const sic = sourceImgContainer
-      const sicRatio = sic.width / sic.height // 原图容器宽高比
-      let x = 0
-      let y = 0
-      let w = sic.width
-      let h = sic.height
-      let scale = 1
-      if (ratio < sicRatio) {
-        scale = sic.height / height
-        w = sic.height * ratio
-        x = (sic.width - w) / 2
-      }
-      if (ratio > sicRatio) {
-        scale = sic.width / width
-        h = sic.width / ratio
-        y = (sic.height - h) / 2
-      }
-      return {
-        scale, // 蒙版相对需求宽高的缩放
-        x,
-        y,
-        width: w,
-        height: h
-      }
-    },
-    // 原图遮罩样式
-    sourceImgShadeStyle() {
-      const {
-        sourceImgMasking,
-        sourceImgContainer
-      } = this
-      const sic = sourceImgContainer
-      const sim = sourceImgMasking
-      const w = sim.width == sic.width ? sim.width : (sic.width - sim.width) / 2
-      const h = sim.height == sic.height ? sim.height : (sic.height - sim.height) / 2
-      return {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    },
-    previewStyle() {
-      const {
-        width,
-        height,
-        ratio,
-        previewContainer
-      } = this
-      const pc = previewContainer
-      let w = pc.width
-      let h = pc.height
-      const pcRatio = w / h
-      if (ratio < pcRatio) {
-        w = pc.height * ratio
-      }
-      if (ratio > pcRatio) {
-        h = pc.width / ratio
-      }
-      return {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
-  },
-  watch: {
-    value(newValue) {
-      if (newValue && this.loading != 1) {
-        this.reset()
-      }
-    }
-  },
-  methods: {
-    // 点击波纹效果
-    ripple(e) {
-      effectRipple(e)
-    },
-    // 关闭控件
-    off() {
-      setTimeout(() => {
-        this.$emit('input', false)
-        this.$emit('close')
-        if (this.step == 3 && this.loading == 2) {
-          this.setStep(1)
-        }
-      }, 200)
-    },
-    // 设置步骤
-    setStep(no) {
-      // 延时是为了显示动画效果呢，哈哈哈
-      setTimeout(() => {
-        this.step = no
-      }, 200)
-    },
-    /* 图片选择区域函数绑定
-     ---------------------------------------------------------------*/
-    preventDefault(e) {
-      e.preventDefault()
-      return false
-    },
-    handleClick(e) {
-      if (this.loading !== 1) {
-        if (e.target !== this.$refs.fileinput) {
-          e.preventDefault()
-          if (document.activeElement !== this.$refs) {
-            this.$refs.fileinput.click()
-          }
-        }
-      }
-    },
-    handleChange(e) {
-      e.preventDefault()
-      if (this.loading !== 1) {
-        const files = e.target.files || e.dataTransfer.files
-        this.reset()
-        if (this.checkFile(files[0])) {
-          this.setSourceImg(files[0])
-        }
-      }
-    },
-    /* ---------------------------------------------------------------*/
-    // 检测选择的文件是否合适
-    checkFile(file) {
-      let that = this,
-        {
-          lang,
-          maxSize
-        } = that
-      // 仅限图片
-      if (file.type.indexOf('image') === -1) {
-        that.hasError = true
-        that.errorMsg = lang.error.onlyImg
-        return false
-      }
-      // 超出大小
-      if (file.size / 1024 > maxSize) {
-        that.hasError = true
-        that.errorMsg = lang.error.outOfSize + maxSize + 'kb'
-        return false
-      }
-      return true
-    },
-    // 重置控件
-    reset() {
-      const that = this
-      that.loading = 0
-      that.hasError = false
-      that.errorMsg = ''
-      that.progress = 0
-    },
-    // 设置图片源
-    setSourceImg(file) {
-      let that = this,
-        fr = new FileReader()
-      fr.onload = function(e) {
-        that.sourceImgUrl = fr.result
-        that.startCrop()
-      }
-      fr.readAsDataURL(file)
-    },
-    // 剪裁前准备工作
-    startCrop() {
-      let that = this,
-        {
-          width,
-          height,
-          ratio,
-          scale,
-          sourceImgUrl,
-          sourceImgMasking,
-          lang
-        } = that,
-        sim = sourceImgMasking,
-        img = new Image()
-      img.src = sourceImgUrl
-      img.onload = function() {
-        let nWidth = img.naturalWidth,
-          nHeight = img.naturalHeight,
-          nRatio = nWidth / nHeight,
-          w = sim.width,
-          h = sim.height,
-          x = 0,
-          y = 0
-        // 图片像素不达标
-        if (nWidth < width || nHeight < height) {
-          that.hasError = true
-          that.errorMsg = lang.error.lowestPx + width + '*' + height
-          return false
-        }
-        if (ratio > nRatio) {
-          h = w / nRatio
-          y = (sim.height - h) / 2
-        }
-        if (ratio < nRatio) {
-          w = h * nRatio
-          x = (sim.width - w) / 2
-        }
-        scale.range = 0
-        scale.x = x
-        scale.y = y
-        scale.width = w
-        scale.height = h
-        scale.degree = 0
-        scale.minWidth = w
-        scale.minHeight = h
-        scale.maxWidth = nWidth * sim.scale
-        scale.maxHeight = nHeight * sim.scale
-        scale.naturalWidth = nWidth
-        scale.naturalHeight = nHeight
-        that.sourceImg = img
-        that.createImg()
-        that.setStep(2)
-      }
-    },
-    // 鼠标按下图片准备移动
-    imgStartMove(e) {
-      e.preventDefault()
-      // 支持触摸事件，则鼠标事件无效
-      if (this.isSupportTouch && !e.targetTouches) {
-        return false
-      }
-      let et = e.targetTouches ? e.targetTouches[0] : e,
-        {
-          sourceImgMouseDown,
-          scale
-        } = this,
-        simd = sourceImgMouseDown
-      simd.mX = et.screenX
-      simd.mY = et.screenY
-      simd.x = scale.x
-      simd.y = scale.y
-      simd.on = true
-    },
-    // 鼠标按下状态下移动，图片移动
-    imgMove(e) {
-      e.preventDefault()
-      // 支持触摸事件，则鼠标事件无效
-      if (this.isSupportTouch && !e.targetTouches) {
-        return false
-      }
-      let et = e.targetTouches ? e.targetTouches[0] : e,
-        {
-          sourceImgMouseDown: {
-            on,
-            mX,
-            mY,
-            x,
-            y
-          },
-          scale,
-          sourceImgMasking
-        } = this,
-        sim = sourceImgMasking,
-        nX = et.screenX,
-        nY = et.screenY,
-        dX = nX - mX,
-        dY = nY - mY,
-        rX = x + dX,
-        rY = y + dY
-      if (!on) return
-      if (rX > 0) {
-        rX = 0
-      }
-      if (rY > 0) {
-        rY = 0
-      }
-      if (rX < sim.width - scale.width) {
-        rX = sim.width - scale.width
-      }
-      if (rY < sim.height - scale.height) {
-        rY = sim.height - scale.height
-      }
-      scale.x = rX
-      scale.y = rY
-    },
-     // 按钮按下开始向右旋转
-    startRotateRight(e) {
-      let that = this,
-        {
-          scale
-        } = that
-      scale.rotateRight = true
-      function rotate() {
-        if (scale.rotateRight) {
-          const degree = ++scale.degree
-          that.createImg(degree)
-          setTimeout(function() {
-            rotate()
-          }, 60)
-        }
-      }
-      rotate()
-    },
-    // 按钮按下开始向右旋转
-    startRotateLeft(e) {
-      let that = this,
-        {
-          scale
-        } = that
-      scale.rotateLeft = true
-      function rotate() {
-        if (scale.rotateLeft) {
-          const degree = --scale.degree
-          that.createImg(degree)
-          setTimeout(function() {
-            rotate()
-          }, 60)
-        }
-      }
-      rotate()
-    },
-    // 停止旋转
-    endRotate() {
-      const {
-        scale
-      } = this
-      scale.rotateLeft = false
-      scale.rotateRight = false
-    },
-    // 按钮按下开始放大
-    startZoomAdd(e) {
-      let that = this,
-        {
-          scale
-        } = that
-      scale.zoomAddOn = true
-      function zoom() {
-        if (scale.zoomAddOn) {
-          const range = scale.range >= 100 ? 100 : ++scale.range
-          that.zoomImg(range)
-          setTimeout(function() {
-            zoom()
-          }, 60)
-        }
-      }
-      zoom()
-    },
-    // 按钮松开或移开取消放大
-    endZoomAdd(e) {
-      this.scale.zoomAddOn = false
-    },
-    // 按钮按下开始缩小
-    startZoomSub(e) {
-      let that = this,
-        {
-          scale
-        } = that
-      scale.zoomSubOn = true
-      function zoom() {
-        if (scale.zoomSubOn) {
-          const range = scale.range <= 0 ? 0 : --scale.range
-          that.zoomImg(range)
-          setTimeout(function() {
-            zoom()
-          }, 60)
-        }
-      }
-      zoom()
-    },
-    // 按钮松开或移开取消缩小
-    endZoomSub(e) {
-      const {
-        scale
-      } = this
-      scale.zoomSubOn = false
-    },
-    zoomChange(e) {
-      this.zoomImg(e.target.value)
-    },
-    // 缩放原图
-    zoomImg(newRange) {
-      const that = this
-      const {
-        sourceImgMasking,
-        sourceImgMouseDown,
-        scale
-      } = this
-      const {
-        maxWidth,
-        maxHeight,
-        minWidth,
-        minHeight,
-        width,
-        height,
-        x,
-        y,
-        range
-      } = scale
-      const sim = sourceImgMasking
-      // 蒙版宽高
-      const sWidth = sim.width
-      const sHeight = sim.height
-      // 新宽高
-      const nWidth = minWidth + (maxWidth - minWidth) * newRange / 100
-      const nHeight = minHeight + (maxHeight - minHeight) * newRange / 100
-      // 新坐标（根据蒙版中心点缩放）
-      let nX = sWidth / 2 - (nWidth / width) * (sWidth / 2 - x)
-      let nY = sHeight / 2 - (nHeight / height) * (sHeight / 2 - y)
-      // 判断新坐标是否超过蒙版限制
-      if (nX > 0) {
-        nX = 0
-      }
-      if (nY > 0) {
-        nY = 0
-      }
-      if (nX < sWidth - nWidth) {
-        nX = sWidth - nWidth
-      }
-      if (nY < sHeight - nHeight) {
-        nY = sHeight - nHeight
-      }
-      // 赋值处理
-      scale.x = nX
-      scale.y = nY
-      scale.width = nWidth
-      scale.height = nHeight
-      scale.range = newRange
-      setTimeout(function() {
-        if (scale.range == newRange) {
-          that.createImg()
-        }
-      }, 300)
-    },
-     // 生成需求图片
-    createImg(e) {
-      let that = this,
-        {
-          mime,
-          sourceImg,
-          scale: {
-            x,
-            y,
-            width,
-            height,
-            degree
-          },
-          sourceImgMasking: {
-            scale
-          }
-        } = that,
-        canvas = that.$refs.canvas,
-        ctx = canvas.getContext('2d')
-      if (e) {
-        // 取消鼠标按下移动状态
-        that.sourceImgMouseDown.on = false
-      }
-      canvas.width = that.width
-      canvas.height = that.height
-      ctx.clearRect(0, 0, that.width, that.height)
-      // 将透明区域设置为白色底边
-      ctx.fillStyle = '#fff'
-      ctx.fillRect(0, 0, that.width, that.height)
-      ctx.translate(that.width * 0.5, that.height * 0.5)
-      ctx.rotate(Math.PI * degree / 180)
-      ctx.translate(-that.width * 0.5, -that.height * 0.5)
-      ctx.drawImage(sourceImg, x / scale, y / scale, width / scale, height / scale)
-      that.createImgUrl = canvas.toDataURL(mime)
-    },
-    prepareUpload() {
-      const {
-        url,
-        createImgUrl,
-        field,
-        ki
-      } = this
-      this.$emit('crop-success', createImgUrl, field, ki)
-      if (typeof url === 'string' && url) {
-        this.upload()
-      } else {
-        this.off()
-      }
-    },
-    // 上传图片
-    upload() {
-      let that = this,
-        {
-          lang,
-          imgFormat,
-          mime,
-          url,
-          params,
-          headers,
-          field,
-          ki,
-          createImgUrl,
-          withCredentials
-        } = this,
-        fmData = new FormData()
-      fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat)
-      // 添加其他参数
-      if (typeof params === 'object' && params) {
-        Object.keys(params).forEach((k) => {
-          fmData.append(k, params[k])
-        })
-      }
-      // 监听进度回调
-      const uploadProgress = function(event) {
-        if (event.lengthComputable) {
-          that.progress = 100 * Math.round(event.loaded) / event.total
-        }
-      }
-      // 上传文件
-      that.reset()
-      that.loading = 1
-      that.setStep(3)
-      request({
-        url,
-        method: 'post',
-        data: fmData
-      }).then(resData => {
-        that.loading = 2
-        that.$emit('crop-upload-success', resData.data)
-      }).catch(err => {
-        if (that.value) {
-          that.loading = 3
-          that.hasError = true
-          that.errorMsg = lang.fail
-          that.$emit('crop-upload-fail', err, field, ki)
-        }
-      })
-    }
-  },
-  created() {
-    // 绑定按键esc隐藏此插件事件
-    document.addEventListener('keyup', (e) => {
-      if (this.value && (e.key == 'Escape' || e.keyCode == 27)) {
-        this.off()
-      }
-    })
-  }
-}
-</script>
-
-<!--
-<style lang='sass' src="./scss/upload.scss">
-</style> -->
-
-<style>
-@charset "UTF-8";
-@-webkit-keyframes vicp_progress {
-  0% {
-    background-position-y: 0; }
-  100% {
-    background-position-y: 40px; } }
-@keyframes vicp_progress {
-  0% {
-    background-position-y: 0; }
-  100% {
-    background-position-y: 40px; } }
-@-webkit-keyframes vicp {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0) translatey(-60px);
-            transform: scale(0) translatey(-60px); }
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1) translatey(0);
-            transform: scale(1) translatey(0); } }
-@keyframes vicp {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(0) translatey(-60px);
-            transform: scale(0) translatey(-60px); }
-  100% {
-    opacity: 1;
-    -webkit-transform: scale(1) translatey(0);
-            transform: scale(1) translatey(0); } }
-.vue-image-crop-upload {
-  position: fixed;
-  display: block;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  z-index: 10000;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.65);
-  -webkit-tap-highlight-color: transparent;
-  -moz-tap-highlight-color: transparent; }
-  .vue-image-crop-upload .vicp-wrap {
-    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-    position: fixed;
-    display: block;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-    z-index: 10000;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    width: 600px;
-    height: 330px;
-    padding: 25px;
-    background-color: #fff;
-    border-radius: 2px;
-    -webkit-animation: vicp 0.12s ease-in;
-            animation: vicp 0.12s ease-in; }
-    .vue-image-crop-upload .vicp-wrap .vicp-close {
-      position: absolute;
-      right: -30px;
-      top: -30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
-        position: relative;
-        display: block;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        -webkit-transition: -webkit-transform 0.18s;
-        transition: -webkit-transform 0.18s;
-        transition: transform 0.18s;
-        transition: transform 0.18s, -webkit-transform 0.18s;
-        -webkit-transform: rotate(0);
-            -ms-transform: rotate(0);
-                transform: rotate(0); }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after, .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
-          -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-                  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-          content: '';
-          position: absolute;
-          top: 12px;
-          left: 4px;
-          width: 20px;
-          height: 3px;
-          -webkit-transform: rotate(45deg);
-              -ms-transform: rotate(45deg);
-                  transform: rotate(45deg);
-          background-color: #fff; }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
-          -webkit-transform: rotate(-45deg);
-              -ms-transform: rotate(-45deg);
-                  transform: rotate(-45deg); }
-        .vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
-          -webkit-transform: rotate(90deg);
-              -ms-transform: rotate(90deg);
-                  transform: rotate(90deg); }
-    .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
-      position: relative;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed rgba(0, 0, 0, 0.08);
-      overflow: hidden; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
-        display: block;
-        margin: 0 auto 6px;
-        width: 42px;
-        height: 42px;
-        overflow: hidden; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-arrow {
-          display: block;
-          margin: 0 auto;
-          width: 0;
-          height: 0;
-          border-bottom: 14.7px solid rgba(0, 0, 0, 0.3);
-          border-left: 14.7px solid transparent;
-          border-right: 14.7px solid transparent; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-body {
-          display: block;
-          width: 12.6px;
-          height: 14.7px;
-          margin: 0 auto;
-          background-color: rgba(0, 0, 0, 0.3); }
-        .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 .vicp-icon1-bottom {
-          -webkit-box-sizing: border-box;
-                  box-sizing: border-box;
-          display: block;
-          height: 12.6px;
-          border: 6px solid rgba(0, 0, 0, 0.3);
-          border-top: none; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
-        display: block;
-        padding: 15px;
-        font-size: 14px;
-        color: #666;
-        line-height: 30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-no-supported-hint {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        padding: 30px;
-        width: 100%;
-        height: 60px;
-        line-height: 30px;
-        background-color: #eee;
-        text-align: center;
-        color: #666;
-        font-size: 14px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
-        cursor: pointer;
-        border-color: rgba(0, 0, 0, 0.1);
-        background-color: rgba(0, 0, 0, 0.05); }
-    .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
-      overflow: hidden; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
-        float: left; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container {
-          position: relative;
-          display: block;
-          width: 240px;
-          height: 180px;
-          background-color: #e5e5e0;
-          overflow: hidden; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img {
-            position: absolute;
-            display: block;
-            cursor: move;
-            -webkit-user-select: none;
-               -moz-user-select: none;
-                -ms-user-select: none;
-                    user-select: none; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade {
-            -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-            position: absolute;
-            background-color: rgba(241, 242, 243, 0.8); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-1 {
-              top: 0;
-              left: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-img-container .vicp-img-shade.vicp-img-shade-2 {
-              bottom: 0;
-              right: 0; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate {
-          position: relative;
-          width: 240px;
-          height: 18px; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i {
-            display: block;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            line-height: 18px;
-            text-align: center;
-            font-size: 12px;
-            font-weight: bold;
-            background-color: rgba(0, 0, 0, 0.08);
-            color: #fff;
-            overflow: hidden; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:first-child {
-              float: left; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-rotate i:last-child {
-              float: right; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range {
-          position: relative;
-          margin: 30px 0 10px 0;
-          width: 240px;
-          height: 18px; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5,
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-            position: absolute;
-            top: 0;
-            width: 18px;
-            height: 18px;
-            border-radius: 100%;
-            background-color: rgba(0, 0, 0, 0.08); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5:hover,
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6:hover {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              cursor: pointer;
-              background-color: rgba(0, 0, 0, 0.14); }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5 {
-            left: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon5::before {
-              position: absolute;
-              content: '';
-              display: block;
-              left: 3px;
-              top: 8px;
-              width: 12px;
-              height: 2px;
-              background-color: #fff; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6 {
-            right: 0; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::before {
-              position: absolute;
-              content: '';
-              display: block;
-              left: 3px;
-              top: 8px;
-              width: 12px;
-              height: 2px;
-              background-color: #fff; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range .vicp-icon6::after {
-              position: absolute;
-              content: '';
-              display: block;
-              top: 3px;
-              left: 8px;
-              width: 2px;
-              height: 12px;
-              background-color: #fff; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range] {
-            display: block;
-            padding-top: 5px;
-            margin: 0 auto;
-            width: 180px;
-            height: 8px;
-            vertical-align: top;
-            background: transparent;
-            -webkit-appearance: none;
-               -moz-appearance: none;
-                    appearance: none;
-            cursor: pointer;
-            /* 滑块
-               ---------------------------------------------------------------*/
-            /* 轨道
-               ---------------------------------------------------------------*/ }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus {
-              outline: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-                      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -webkit-appearance: none;
-                      appearance: none;
-              margin-top: -3px;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              -moz-appearance: none;
-                   appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border-radius: 100%;
-              border: none;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-thumb {
-              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
-              appearance: none;
-              width: 12px;
-              height: 12px;
-              background-color: #61c091;
-              border: none;
-              border-radius: 100%;
-              -webkit-transition: 0.2s;
-              transition: 0.2s; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-moz-range-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-ms-thumb {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:active::-webkit-slider-thumb {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
-              margin-top: -4px;
-              width: 14px;
-              height: 14px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-webkit-slider-runnable-track {
-              -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-                      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-moz-range-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              height: 6px;
-              cursor: pointer;
-              border-radius: 2px;
-              border: none;
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-track {
-              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-              width: 100%;
-              cursor: pointer;
-              background: transparent;
-              border-color: transparent;
-              color: transparent;
-              height: 6px;
-              border-radius: 2px;
-              border: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.3); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.15); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-webkit-slider-runnable-track {
-              background-color: rgba(68, 170, 119, 0.5); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-moz-range-track {
-              background-color: rgba(68, 170, 119, 0.5); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-lower {
-              background-color: rgba(68, 170, 119, 0.45); }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left .vicp-range input[type=range]:focus::-ms-fill-upper {
-              background-color: rgba(68, 170, 119, 0.25); }
-      .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
-        float: right; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
-          height: 150px;
-          overflow: hidden; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item {
-            position: relative;
-            padding: 5px;
-            width: 100px;
-            height: 100px;
-            float: left;
-            margin-right: 16px; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item span {
-              position: absolute;
-              bottom: -30px;
-              width: 100%;
-              font-size: 14px;
-              color: #bbb;
-              display: block;
-              text-align: center; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item img {
-              position: absolute;
-              display: block;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              margin: auto;
-              padding: 3px;
-              background-color: #fff;
-              border: 1px solid rgba(0, 0, 0, 0.15);
-              overflow: hidden;
-              -webkit-user-select: none;
-                 -moz-user-select: none;
-                  -ms-user-select: none;
-                      user-select: none; }
-            .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle {
-              margin-right: 0; }
-              .vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview .vicp-preview-item.vicp-preview-item-circle img {
-                border-radius: 100%; }
-    .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
-      position: relative;
-      -webkit-box-sizing: border-box;
-              box-sizing: border-box;
-      padding: 35px;
-      height: 170px;
-      background-color: rgba(0, 0, 0, 0.03);
-      text-align: center;
-      border: 1px dashed #ddd; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
-        display: block;
-        padding: 15px;
-        font-size: 16px;
-        color: #999;
-        line-height: 30px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
-        margin-top: 12px;
-        background-color: rgba(0, 0, 0, 0.08);
-        border-radius: 3px; }
-        .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress {
-          position: relative;
-          display: block;
-          height: 5px;
-          border-radius: 3px;
-          background-color: #4a7;
-          -webkit-box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-                  box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
-          -webkit-transition: width 0.15s linear;
-          transition: width 0.15s linear;
-          background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-          background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-          background-size: 40px 40px;
-          -webkit-animation: vicp_progress 0.5s linear infinite;
-                  animation: vicp_progress 0.5s linear infinite; }
-          .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap .vicp-progress::after {
-            content: '';
-            position: absolute;
-            display: block;
-            top: -3px;
-            right: -3px;
-            width: 9px;
-            height: 9px;
-            border: 1px solid rgba(245, 246, 247, 0.7);
-            -webkit-box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-                    box-shadow: 0 1px 4px 0 rgba(68, 170, 119, 0.7);
-            border-radius: 100%;
-            background-color: #4a7; }
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
-      .vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
-        height: 100px;
-        line-height: 100px; }
-    .vue-image-crop-upload .vicp-wrap .vicp-operate {
-      position: absolute;
-      right: 20px;
-      bottom: 20px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-operate a {
-        position: relative;
-        float: left;
-        display: block;
-        margin-left: 10px;
-        width: 100px;
-        height: 36px;
-        line-height: 36px;
-        text-align: center;
-        cursor: pointer;
-        font-size: 14px;
-        color: #4a7;
-        border-radius: 2px;
-        overflow: hidden;
-        -webkit-user-select: none;
-           -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none; }
-        .vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
-          background-color: rgba(0, 0, 0, 0.03); }
-    .vue-image-crop-upload .vicp-wrap .vicp-error,
-    .vue-image-crop-upload .vicp-wrap .vicp-success {
-      display: block;
-      font-size: 14px;
-      line-height: 24px;
-      height: 24px;
-      color: #d10;
-      text-align: center;
-      vertical-align: top; }
-    .vue-image-crop-upload .vicp-wrap .vicp-success {
-      color: #4a7; }
-    .vue-image-crop-upload .vicp-wrap .vicp-icon3 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
-        position: absolute;
-        top: 3px;
-        left: 6px;
-        width: 6px;
-        height: 10px;
-        border-width: 0 2px 2px 0;
-        border-color: #4a7;
-        border-style: solid;
-        -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-                transform: rotate(45deg);
-        content: ''; }
-    .vue-image-crop-upload .vicp-wrap .vicp-icon2 {
-      position: relative;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      top: 4px; }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon2::after, .vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
-        content: '';
-        position: absolute;
-        top: 9px;
-        left: 4px;
-        width: 13px;
-        height: 2px;
-        background-color: #d10;
-        -webkit-transform: rotate(45deg);
-            -ms-transform: rotate(45deg);
-                transform: rotate(45deg); }
-      .vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
-        -webkit-transform: rotate(-45deg);
-            -ms-transform: rotate(-45deg);
-                transform: rotate(-45deg); }
-.e-ripple {
-  position: absolute;
-  border-radius: 100%;
-  background-color: rgba(0, 0, 0, 0.15);
-  background-clip: padding-box;
-  pointer-events: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  -webkit-transform: scale(0);
-      -ms-transform: scale(0);
-          transform: scale(0);
-  opacity: 1; }
-  .e-ripple.z-active {
-    opacity: 0;
-    -webkit-transform: scale(2);
-        -ms-transform: scale(2);
-            transform: scale(2);
-    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
-    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; }
-</style>
diff --git a/src/components/element-ui/ImageCropper/utils/data2blob.js b/src/components/element-ui/ImageCropper/utils/data2blob.js
deleted file mode 100755
index 9c47f8af..00000000
--- a/src/components/element-ui/ImageCropper/utils/data2blob.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * database64文件格式转换为2进制
- *
- * @param  {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
- * @param  {[String]} mime [description]
- * @return {[blob]}      [description]
- */
-export default function(data, mime) {
-  data = data.split(',')[1]
-  data = window.atob(data)
-  var ia = new Uint8Array(data.length)
-  for (var i = 0; i < data.length; i++) {
-    ia[i] = data.charCodeAt(i)
-  }
-  // canvas.toDataURL 返回的默认格式就是 image/png
-  return new Blob([ia], {
-    type: mime
-  })
-}
diff --git a/src/components/element-ui/ImageCropper/utils/effectRipple.js b/src/components/element-ui/ImageCropper/utils/effectRipple.js
deleted file mode 100755
index 46a01640..00000000
--- a/src/components/element-ui/ImageCropper/utils/effectRipple.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * 点击波纹效果
- *
- * @param  {[event]} e        [description]
- * @param  {[Object]} arg_opts [description]
- * @return {[bollean]}          [description]
- */
-export default function(e, arg_opts) {
-  var opts = Object.assign({
-    ele: e.target, // 波纹作用元素
-    type: 'hit', // hit点击位置扩散center中心点扩展
-    bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
-  }, arg_opts)
-  var target = opts.ele
-  if (target) {
-    var rect = target.getBoundingClientRect()
-    var ripple = target.querySelector('.e-ripple')
-    if (!ripple) {
-      ripple = document.createElement('span')
-      ripple.className = 'e-ripple'
-      ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
-      target.appendChild(ripple)
-    } else {
-      ripple.className = 'e-ripple'
-    }
-    switch (opts.type) {
-      case 'center':
-        ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
-        ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
-        break
-      default:
-        ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
-        ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
-    }
-    ripple.style.backgroundColor = opts.bgc
-    ripple.className = 'e-ripple z-active'
-    return false
-  }
-}
diff --git a/src/components/element-ui/ImageCropper/utils/language.js b/src/components/element-ui/ImageCropper/utils/language.js
deleted file mode 100755
index 727872d9..00000000
--- a/src/components/element-ui/ImageCropper/utils/language.js
+++ /dev/null
@@ -1,232 +0,0 @@
-export default {
-  zh: {
-    hint: '点击，或拖动图片至此处',
-    loading: '正在上传……',
-    noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
-    success: '上传成功',
-    fail: '图片上传失败',
-    preview: '头像预览',
-    btn: {
-      off: '取消',
-      close: '关闭',
-      back: '上一步',
-      save: '保存'
-    },
-    error: {
-      onlyImg: '仅限图片格式',
-      outOfSize: '单文件大小不能超过 ',
-      lowestPx: '图片最低像素为（宽*高）：'
-    }
-  },
-  'zh-tw': {
-    hint: '點擊，或拖動圖片至此處',
-    loading: '正在上傳……',
-    noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
-    success: '上傳成功',
-    fail: '圖片上傳失敗',
-    preview: '頭像預覽',
-    btn: {
-      off: '取消',
-      close: '關閉',
-      back: '上一步',
-      save: '保存'
-    },
-    error: {
-      onlyImg: '僅限圖片格式',
-      outOfSize: '單文件大小不能超過 ',
-      lowestPx: '圖片最低像素為（寬*高）：'
-    }
-  },
-  en: {
-    hint: 'Click or drag the file here to upload',
-    loading: 'Uploading…',
-    noSupported: 'Browser is not supported, please use IE10+ or other browsers',
-    success: 'Upload success',
-    fail: 'Upload failed',
-    preview: 'Preview',
-    btn: {
-      off: 'Cancel',
-      close: 'Close',
-      back: 'Back',
-      save: 'Save'
-    },
-    error: {
-      onlyImg: 'Image only',
-      outOfSize: 'Image exceeds size limit: ',
-      lowestPx: 'Image\'s size is too low. Expected at least: '
-    }
-  },
-  ro: {
-    hint: 'Atinge sau trage fișierul aici',
-    loading: 'Se încarcă',
-    noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
-    success: 'S-a încărcat cu succes',
-    fail: 'A apărut o problemă la încărcare',
-    preview: 'Previzualizează',
-
-    btn: {
-      off: 'Anulează',
-      close: 'Închide',
-      back: 'Înapoi',
-      save: 'Salvează'
-    },
-
-    error: {
-      onlyImg: 'Doar imagini',
-      outOfSize: 'Imaginea depășește limita de: ',
-      loewstPx: 'Imaginea este prea mică; Minim: '
-    }
-  },
-  ru: {
-    hint: 'Нажмите, или перетащите файл в это окно',
-    loading: 'Загружаю……',
-    noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
-    success: 'Загрузка выполнена успешно',
-    fail: 'Ошибка загрузки',
-    preview: 'Предпросмотр',
-    btn: {
-      off: 'Отменить',
-      close: 'Закрыть',
-      back: 'Назад',
-      save: 'Сохранить'
-    },
-    error: {
-      onlyImg: 'Только изображения',
-      outOfSize: 'Изображение превышает предельный размер: ',
-      lowestPx: 'Минимальный размер изображения: '
-    }
-  },
-  'pt-br': {
-    hint: 'Clique ou arraste o arquivo aqui para carregar',
-    loading: 'Carregando…',
-    noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
-    success: 'Sucesso ao carregar imagem',
-    fail: 'Falha ao carregar imagem',
-    preview: 'Pré-visualizar',
-    btn: {
-      off: 'Cancelar',
-      close: 'Fechar',
-      back: 'Voltar',
-      save: 'Salvar'
-    },
-    error: {
-      onlyImg: 'Apenas imagens',
-      outOfSize: 'A imagem excede o limite de tamanho: ',
-      lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
-    }
-  },
-  fr: {
-    hint: 'Cliquez ou glissez le fichier ici.',
-    loading: 'Téléchargement…',
-    noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
-    success: 'Téléchargement réussit',
-    fail: 'Téléchargement echoué',
-    preview: 'Aperçu',
-    btn: {
-      off: 'Annuler',
-      close: 'Fermer',
-      back: 'Retour',
-      save: 'Enregistrer'
-    },
-    error: {
-      onlyImg: 'Image uniquement',
-      outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
-      lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
-    }
-  },
-  nl: {
-    hint: 'Klik hier of sleep een afbeelding in dit vlak',
-    loading: 'Uploaden…',
-    noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
-    success: 'Upload succesvol',
-    fail: 'Upload mislukt',
-    preview: 'Voorbeeld',
-    btn: {
-      off: 'Annuleren',
-      close: 'Sluiten',
-      back: 'Terug',
-      save: 'Opslaan'
-    },
-    error: {
-      onlyImg: 'Alleen afbeeldingen',
-      outOfSize: 'De afbeelding is groter dan: ',
-      lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
-    }
-  },
-  tr: {
-    hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
-    loading: 'Yükleniyor…',
-    noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
-    success: 'Yükleme başarılı',
-    fail: 'Yüklemede hata oluştu',
-    preview: 'Önizle',
-    btn: {
-      off: 'İptal',
-      close: 'Kapat',
-      back: 'Geri',
-      save: 'Kaydet'
-    },
-    error: {
-      onlyImg: 'Sadece resim',
-      outOfSize: 'Resim yükleme limitini aşıyor: ',
-      lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
-    }
-  },
-  'es-MX': {
-    hint: 'Selecciona o arrastra una imagen',
-    loading: 'Subiendo...',
-    noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
-    success: 'Subido exitosamente',
-    fail: 'Sucedió un error',
-    preview: 'Vista previa',
-    btn: {
-      off: 'Cancelar',
-      close: 'Cerrar',
-      back: 'Atras',
-      save: 'Guardar'
-    },
-    error: {
-      onlyImg: 'Unicamente imagenes',
-      outOfSize: 'La imagen excede el tamaño maximo:',
-      lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
-    }
-  },
-  de: {
-    hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
-    loading: 'Hochladen…',
-    noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
-    success: 'Upload erfolgreich',
-    fail: 'Upload fehlgeschlagen',
-    preview: 'Vorschau',
-    btn: {
-      off: 'Abbrechen',
-      close: 'Schließen',
-      back: 'Zurück',
-      save: 'Speichern'
-    },
-    error: {
-      onlyImg: 'Nur Bilder',
-      outOfSize: 'Das Bild ist zu groß: ',
-      lowestPx: 'Das Bild ist zu klein. Mindestens: '
-    }
-  },
-  ja: {
-    hint: 'クリック・ドラッグしてファイルをアップロード',
-    loading: 'アップロード中...',
-    noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
-    success: 'アップロード成功',
-    fail: 'アップロード失敗',
-    preview: 'プレビュー',
-    btn: {
-      off: 'キャンセル',
-      close: '閉じる',
-      back: '戻る',
-      save: '保存'
-    },
-    error: {
-      onlyImg: '画像のみ',
-      outOfSize: '画像サイズが上限を超えています。上限: ',
-      lowestPx: '画像が小さすぎます。最小サイズ: '
-    }
-  }
-}
diff --git a/src/components/element-ui/ImageCropper/utils/mimes.js b/src/components/element-ui/ImageCropper/utils/mimes.js
deleted file mode 100755
index e20c085c..00000000
--- a/src/components/element-ui/ImageCropper/utils/mimes.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  'jpg': 'image/jpeg',
-  'png': 'image/png',
-  'gif': 'image/gif',
-  'svg': 'image/svg+xml',
-  'psd': 'image/photoshop'
-}
diff --git a/src/components/element-ui/JsonEditor/index.vue b/src/components/element-ui/JsonEditor/index.vue
deleted file mode 100644
index b44a4a2c..00000000
--- a/src/components/element-ui/JsonEditor/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div class="json-editor">
-    <textarea ref="textarea"/>
-  </div>
-</template>
-
-<script>
-import CodeMirror from 'codemirror'
-import 'codemirror/addon/lint/lint.css'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/rubyblue.css'
-require('script-loader!jsonlint')
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/lint/json-lint'
-
-export default {
-  name: 'JsonEditor',
-  /* eslint-disable vue/require-prop-types */
-  props: ['value'],
-  data: function() {
-    return {
-      jsonEditor: false
-    }
-  },
-  watch: {
-    value(value) {
-      const editor_value = this.jsonEditor.getValue()
-      if (value !== editor_value) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-      }
-    }
-  },
-  mounted() {
-    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
-      lineNumbers: true,
-      mode: 'application/json',
-      gutters: ['CodeMirror-lint-markers'],
-      theme: 'rubyblue',
-      lint: true
-    })
-
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
-    this.jsonEditor.on('change', cm => {
-      this.$emit('changed', cm.getValue())
-      this.$emit('input', cm.getValue())
-    })
-  },
-  methods: {
-    getValue() {
-      return this.jsonEditor.getValue()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.json-editor{
-  height: 100%;
-  position: relative;
-}
-.json-editor >>> .CodeMirror {
-  height: auto;
-  min-height: 300px;
-}
-.json-editor >>> .CodeMirror-scroll{
-  min-height: 300px;
-}
-.json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #F08047;
-}
-</style>
diff --git a/src/components/element-ui/Kanban/index.vue b/src/components/element-ui/Kanban/index.vue
deleted file mode 100644
index dadeb648..00000000
--- a/src/components/element-ui/Kanban/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="board-column">
-    <div class="board-column-header">
-      {{ headerText }}
-    </div>
-    <draggable
-      :list="list"
-      :options="options"
-      class="board-column-content">
-      <div v-for="element in list" :key="element.id" class="board-item">
-        {{ element.name }} {{ element.id }}
-      </div>
-    </draggable>
-  </div>
-</template>
-<script>
-import draggable from 'vuedraggable'
-
-export default {
-  name: 'DragKanbanDemo',
-  components: {
-    draggable
-  },
-  props: {
-    headerText: {
-      type: String,
-      default: 'Header'
-    },
-    options: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    list: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.board-column {
-  min-width: 300px;
-  min-height: 100px;
-  height: auto;
-  overflow: hidden;
-  background: #f0f0f0;
-  border-radius: 3px;
-
-  .board-column-header {
-    height: 50px;
-    line-height: 50px;
-    overflow: hidden;
-    padding: 0 20px;
-    text-align: center;
-    background: #333;
-    color: #fff;
-    border-radius: 3px 3px 0 0;
-  }
-
-  .board-column-content {
-    height: auto;
-    overflow: hidden;
-    border: 10px solid transparent;
-    min-height: 60px;
-    display: flex;
-    justify-content: flex-start;
-    flex-direction: column;
-    align-items: center;
-
-    .board-item {
-      cursor: pointer;
-      width: 100%;
-      height: 64px;
-      margin: 5px 0;
-      background-color: #fff;
-      text-align: left;
-      line-height: 54px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
-
diff --git a/src/components/element-ui/MDinput/index.vue b/src/components/element-ui/MDinput/index.vue
deleted file mode 100644
index 3db8cfc3..00000000
--- a/src/components/element-ui/MDinput/index.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<template>
-  <div :class="computedClasses" class="material-input__component">
-    <div :class="{iconClass:icon}">
-      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon"/>
-      <input
-        v-if="type === 'email'"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        v-model="currentValue"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :required="required"
-        type="email"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput">
-      <input
-        v-if="type === 'url'"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        v-model="currentValue"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :required="required"
-        type="url"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput">
-      <input
-        v-if="type === 'number'"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        v-model="currentValue"
-        :step="step"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :max="max"
-        :min="min"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :required="required"
-        type="number"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput">
-      <input
-        v-if="type === 'password'"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        v-model="currentValue"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :max="max"
-        :min="min"
-        :required="required"
-        type="password"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput">
-      <input
-        v-if="type === 'tel'"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        v-model="currentValue"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :required="required"
-        type="tel"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput">
-      <input
-        v-if="type === 'text'"
-        :name="name"
-        :placeholder="fillPlaceHolder"
-        v-model="currentValue"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autoComplete="autoComplete"
-        :minlength="minlength"
-        :maxlength="maxlength"
-        :required="required"
-        type="text"
-        class="material-input"
-        @focus="handleMdFocus"
-        @blur="handleMdBlur"
-        @input="handleModelInput">
-      <span class="material-input-bar"/>
-      <label class="material-label">
-        <slot/>
-      </label>
-    </div>
-  </div>
-</template>
-
-<script>
-// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
-
-export default {
-  name: 'MdInput',
-  props: {
-    /* eslint-disable */
-    icon: String,
-    name: String,
-    type: {
-      type: String,
-      default: 'text'
-    },
-    value: [String, Number],
-    placeholder: String,
-    readonly: Boolean,
-    disabled: Boolean,
-    min: String,
-    max: String,
-    step: String,
-    minlength: Number,
-    maxlength: Number,
-    required: {
-      type: Boolean,
-      default: true
-    },
-    autoComplete: {
-      type: String,
-      default: 'off'
-    },
-    validateEvent: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data: function() {
-    return {
-      currentValue: this.value,
-      focus: false,
-      fillPlaceHolder: null
-    }
-  },
-  computed: {
-    computedClasses() {
-      return {
-        'material--active': this.focus,
-        'material--disabled': this.disabled,
-        'material--raised': Boolean(this.focus || this.currentValue) // has value
-      }
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.currentValue = newValue
-    }
-  },
-  methods: {
-    handleModelInput(event) {
-      const value = event.target.value
-      this.$emit('input', value)
-      if (this.$parent.$options.componentName === 'ElFormItem') {
-        if (this.validateEvent) {
-          this.$parent.$emit('el.form.change', [value])
-        }
-      }
-      this.$emit('change', value)
-    },
-    handleMdFocus(event) {
-      this.focus = true
-      this.$emit('focus', event)
-      if (this.placeholder && this.placeholder !== '') {
-        this.fillPlaceHolder = this.placeholder
-      }
-    },
-    handleMdBlur(event) {
-      this.focus = false
-      this.$emit('blur', event)
-      this.fillPlaceHolder = null
-      if (this.$parent.$options.componentName === 'ElFormItem') {
-        if (this.validateEvent) {
-          this.$parent.$emit('el.form.blur', [this.currentValue])
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  // Fonts:
-  $font-size-base: 16px;
-  $font-size-small: 18px;
-  $font-size-smallest: 12px;
-  $font-weight-normal: normal;
-  $font-weight-bold: bold;
-  $apixel: 1px;
-  // Utils
-  $spacer: 12px;
-  $transition: 0.2s ease all;
-  $index: 0px;
-  $index-has-icon: 30px;
-  // Theme:
-  $color-white: white;
-  $color-grey: #9E9E9E;
-  $color-grey-light: #E0E0E0;
-  $color-blue: #2196F3;
-  $color-red: #F44336;
-  $color-black: black;
-  // Base clases:
-  %base-bar-pseudo {
-    content: '';
-    height: 1px;
-    width: 0;
-    bottom: 0;
-    position: absolute;
-    transition: $transition;
-  }
-
-  // Mixins:
-  @mixin slided-top() {
-    top: - ($font-size-base + $spacer);
-    left: 0;
-    font-size: $font-size-base;
-    font-weight: $font-weight-bold;
-  }
-
-  // Component:
-  .material-input__component {
-    margin-top: 36px;
-    position: relative;
-    * {
-      box-sizing: border-box;
-    }
-    .iconClass {
-      .material-input__icon {
-        position: absolute;
-        left: 0;
-        line-height: $font-size-base;
-        color: $color-blue;
-        top: $spacer;
-        width: $index-has-icon;
-        height: $font-size-base;
-        font-size: $font-size-base;
-        font-weight: $font-weight-normal;
-        pointer-events: none;
-      }
-      .material-label {
-        left: $index-has-icon;
-      }
-      .material-input {
-        text-indent: $index-has-icon;
-      }
-    }
-    .material-input {
-      font-size: $font-size-base;
-      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
-      display: block;
-      width: 100%;
-      border: none;
-      line-height: 1;
-      border-radius: 0;
-      &:focus {
-        outline: none;
-        border: none;
-        border-bottom: 1px solid transparent; // fixes the height issue
-      }
-    }
-    .material-label {
-      font-weight: $font-weight-normal;
-      position: absolute;
-      pointer-events: none;
-      left: $index;
-      top: 0;
-      transition: $transition;
-      font-size: $font-size-small;
-    }
-    .material-input-bar {
-      position: relative;
-      display: block;
-      width: 100%;
-      &:before {
-        @extend %base-bar-pseudo;
-        left: 50%;
-      }
-      &:after {
-        @extend %base-bar-pseudo;
-        right: 50%;
-      }
-    }
-    // Disabled state:
-    &.material--disabled {
-      .material-input {
-        border-bottom-style: dashed;
-      }
-    }
-    // Raised state:
-    &.material--raised {
-      .material-label {
-        @include slided-top();
-      }
-    }
-    // Active state:
-    &.material--active {
-      .material-input-bar {
-        &:before,
-        &:after {
-          width: 50%;
-        }
-      }
-    }
-  }
-
-  .material-input__component {
-    background: $color-white;
-    .material-input {
-      background: none;
-      color: $color-black;
-      text-indent: $index;
-      border-bottom: 1px solid $color-grey-light;
-    }
-    .material-label {
-      color: $color-grey;
-    }
-    .material-input-bar {
-      &:before,
-      &:after {
-        background: $color-blue;
-      }
-    }
-    // Active state:
-    &.material--active {
-      .material-label {
-        color: $color-blue;
-      }
-    }
-    // Errors:
-    &.material--has-errors {
-      &.material--active .material-label {
-        color: $color-red;
-      }
-      .material-input-bar {
-        &:before,
-        &:after {
-          background: transparent;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/components/element-ui/Pagination/index.vue b/src/components/element-ui/Pagination/index.vue
deleted file mode 100644
index 8d104e84..00000000
--- a/src/components/element-ui/Pagination/index.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"/>
-  </div>
-</template>
-
-<script>
-import { scrollTo } from '@/utils/scrollTo'
-
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>
diff --git a/src/components/element-ui/PanThumb/index.vue b/src/components/element-ui/PanThumb/index.vue
deleted file mode 100644
index ec549f43..00000000
--- a/src/components/element-ui/PanThumb/index.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
-    <div class="pan-info">
-      <div class="pan-info-roles-container">
-        <slot/>
-      </div>
-    </div>
-    <img :src="image" class="pan-thumb">
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PanThumb',
-  props: {
-    image: {
-      type: String,
-      required: true
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    },
-    width: {
-      type: String,
-      default: '150px'
-    },
-    height: {
-      type: String,
-      default: '150px'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pan-item {
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.pan-info-roles-container {
-  padding: 20px;
-  text-align: center;
-}
-
-.pan-thumb {
-  width: 100%;
-  height: 100%;
-  background-size: 100%;
-  border-radius: 50%;
-  overflow: hidden;
-  position: absolute;
-  transform-origin: 95% 40%;
-  transition: all 0.3s ease-in-out;
-}
-
-.pan-thumb:after {
-  content: '';
-  width: 8px;
-  height: 8px;
-  position: absolute;
-  border-radius: 50%;
-  top: 40%;
-  left: 95%;
-  margin: -4px 0 0 -4px;
-  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-}
-
-.pan-info {
-  position: absolute;
-  width: inherit;
-  height: inherit;
-  border-radius: 50%;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
-}
-
-.pan-info h3 {
-  color: #fff;
-  text-transform: uppercase;
-  position: relative;
-  letter-spacing: 2px;
-  font-size: 18px;
-  margin: 0 60px;
-  padding: 22px 0 0 0;
-  height: 85px;
-  font-family: 'Open Sans', Arial, sans-serif;
-  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.pan-info p {
-  color: #fff;
-  padding: 10px 5px;
-  font-style: italic;
-  margin: 0 30px;
-  font-size: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.pan-info p a {
-  display: block;
-  color: #333;
-  width: 80px;
-  height: 80px;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  color: #fff;
-  font-style: normal;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 9px;
-  letter-spacing: 1px;
-  padding-top: 24px;
-  margin: 7px auto 0;
-  font-family: 'Open Sans', Arial, sans-serif;
-  opacity: 0;
-  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
-  transform: translateX(60px) rotate(90deg);
-}
-
-.pan-info p a:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.pan-item:hover .pan-thumb {
-  transform: rotate(-110deg);
-}
-
-.pan-item:hover .pan-info p a {
-  opacity: 1;
-  transform: translateX(0px) rotate(0deg);
-}
-</style>
diff --git a/src/components/element-ui/Share/dropdownMenu.vue b/src/components/element-ui/Share/dropdownMenu.vue
deleted file mode 100644
index 8b78e7bd..00000000
--- a/src/components/element-ui/Share/dropdownMenu.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div :class="{active:isActive}" class="share-dropdown-menu">
-    <div class="share-dropdown-menu-wrapper">
-      <span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
-      <div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
-        <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
-        <span v-else>{{ item.title }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: function() {
-        return []
-      }
-    },
-    title: {
-      type: String,
-      default: 'vue'
-    }
-  },
-  data: function() {
-    return {
-      isActive: false
-    }
-  },
-  methods: {
-    clickTitle() {
-      this.isActive = !this.isActive
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" >
-$n: 8; //和items.length 相同
-$t: .1s;
-.share-dropdown-menu {
-  width: 250px;
-  position: relative;
-  z-index: 1;
-  &-title {
-    width: 100%;
-    display: block;
-    cursor: pointer;
-    background: black;
-    color: white;
-    height: 60px;
-    line-height: 60px;
-    font-size: 20px;
-    text-align: center;
-    z-index: 2;
-    transform: translate3d(0,0,0);
-  }
-  &-wrapper {
-    position: relative;
-  }
-  &-item {
-    text-align: center;
-    position: absolute;
-    width: 100%;
-    background: #e0e0e0;
-    line-height: 60px;
-    height: 60px;
-    cursor: pointer;
-    font-size: 20px;
-    opacity: 1;
-    transition: transform 0.28s ease;
-    &:hover {
-      background: black;
-      color: white;
-    }
-    @for $i from 1 through $n {
-      &:nth-of-type(#{$i}) {
-        z-index: -1;
-        transition-delay: $i*$t;
-        transform: translate3d(0, -60px, 0);
-      }
-    }
-  }
-  &.active {
-    .share-dropdown-menu-wrapper {
-      z-index: 1;
-    }
-    .share-dropdown-menu-item {
-      @for $i from 1 through $n {
-        &:nth-of-type(#{$i}) {
-         transition-delay: ($n - $i)*$t;
-          transform: translate3d(0, ($i - 1)*60px, 0);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/element-ui/SizeSelect/index.vue b/src/components/element-ui/SizeSelect/index.vue
deleted file mode 100644
index 3527a768..00000000
--- a/src/components/element-ui/SizeSelect/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <el-dropdown trigger="click" @command="handleSetSize">
-    <div>
-      <svg-icon class-name="size-icon" icon-class="size" />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">{{
-      item.label }}</el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  data: function() {
-    return {
-      sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
-  },
-  computed: {
-    size() {
-      return this.$store.getters.size
-    }
-  },
-  methods: {
-    handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('setSize', size)
-      this.refreshView()
-      this.$message({
-        message: 'Switch Size Success',
-        type: 'success'
-      })
-    },
-    refreshView() {
-      // In order to make the cached page re-rendered
-      this.$store.dispatch('delAllCachedViews', this.$route)
-
-      const { fullPath } = this.$route
-
-      this.$nextTick(() => {
-        this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
-
-}
-</script>
diff --git a/src/components/element-ui/Sticky/index.vue b/src/components/element-ui/Sticky/index.vue
deleted file mode 100644
index 3e4ce8e4..00000000
--- a/src/components/element-ui/Sticky/index.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div :style="{height:height+'px',zIndex:zIndex}">
-    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
-      <slot>
-        <div>sticky</div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Sticky',
-  props: {
-    stickyTop: {
-      type: Number,
-      default: 0
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  data: function() {
-    return {
-      active: false,
-      position: '',
-      width: undefined,
-      height: undefined,
-      isSticky: false
-    }
-  },
-  mounted() {
-    this.height = this.$el.getBoundingClientRect().height
-    window.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('resize', this.handleReize)
-  },
-  activated() {
-    this.handleScroll()
-  },
-  destroyed() {
-    window.removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleReize)
-  },
-  methods: {
-    sticky() {
-      if (this.active) {
-        return
-      }
-      this.position = 'fixed'
-      this.active = true
-      this.width = this.width + 'px'
-      this.isSticky = true
-    },
-    handleReset() {
-      if (!this.active) {
-        return
-      }
-      this.reset()
-    },
-    reset() {
-      this.position = ''
-      this.width = 'auto'
-      this.active = false
-      this.isSticky = false
-    },
-    handleScroll() {
-      const width = this.$el.getBoundingClientRect().width
-      this.width = width || 'auto'
-      const offsetTop = this.$el.getBoundingClientRect().top
-      if (offsetTop < this.stickyTop) {
-        this.sticky()
-        return
-      }
-      this.handleReset()
-    },
-    handleReize() {
-      if (this.isSticky) {
-        this.width = this.$el.getBoundingClientRect().width + 'px'
-      }
-    }
-  }
-}
-</script>
diff --git a/src/components/element-ui/TextHoverEffect/Mallki.vue b/src/components/element-ui/TextHoverEffect/Mallki.vue
deleted file mode 100644
index 4ea29fc2..00000000
--- a/src/components/element-ui/TextHoverEffect/Mallki.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <a :class="className" class="link--mallki" href="#">
-    {{ text }}
-    <span :data-letters="text"/>
-    <span :data-letters="text"/>
-  </a>
-</template>
-
-<script>
-export default {
-  props: {
-    className: {
-      type: String,
-      default: ''
-    },
-    text: {
-      type: String,
-      default: 'vue-element-admin'
-    }
-  }
-}
-</script>
-
-<style>
-/* Mallki */
-
-.link--mallki {
-  font-weight: 800;
-  color: #4dd9d5;
-  font-family: 'Dosis', sans-serif;
-  -webkit-transition: color 0.5s 0.25s;
-  transition: color 0.5s 0.25s;
-  overflow: hidden;
-  position: relative;
-  display: inline-block;
-  line-height: 1;
-  outline: none;
-  text-decoration: none;
-}
-
-.link--mallki:hover {
-  -webkit-transition: none;
-  transition: none;
-  color: transparent;
-}
-
-.link--mallki::before {
-  content: '';
-  width: 100%;
-  height: 6px;
-  margin: -3px 0 0 0;
-  background: #3888fa;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  -webkit-transform: translate3d(-100%, 0, 0);
-  transform: translate3d(-100%, 0, 0);
-  -webkit-transition: -webkit-transform 0.4s;
-  transition: transform 0.4s;
-  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-}
-
-.link--mallki:hover::before {
-  -webkit-transform: translate3d(100%, 0, 0);
-  transform: translate3d(100%, 0, 0);
-}
-
-.link--mallki span {
-  position: absolute;
-  height: 50%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-}
-
-.link--mallki span::before {
-  content: attr(data-letters);
-  color: red;
-  position: absolute;
-  left: 0;
-  width: 100%;
-  color: #3888fa;
-  -webkit-transition: -webkit-transform 0.5s;
-  transition: transform 0.5s;
-}
-
-.link--mallki span:nth-child(2) {
-  top: 50%;
-}
-
-.link--mallki span:first-child::before {
-  top: 0;
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-}
-
-.link--mallki span:nth-child(2)::before {
-  bottom: 0;
-  -webkit-transform: translate3d(0, -100%, 0);
-  transform: translate3d(0, -100%, 0);
-}
-
-.link--mallki:hover span::before {
-  -webkit-transition-delay: 0.3s;
-  transition-delay: 0.3s;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-}
-</style>
diff --git a/src/components/element-ui/ThemePicker/index.vue b/src/components/element-ui/ThemePicker/index.vue
deleted file mode 100644
index ff6fbf21..00000000
--- a/src/components/element-ui/ThemePicker/index.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <el-color-picker
-    v-model="theme"
-    class="theme-picker"
-    popper-class="theme-picker-dropdown"/>
-</template>
-
-<script>
-
-const version = require('element-ui/package.json').version // element-ui version from node_modules
-const ORIGINAL_THEME = '#409EFF' // default color
-
-export default {
-  data: function() {
-    return {
-      chalk: '', // content of theme-chalk css
-      theme: ORIGINAL_THEME
-    }
-  },
-  watch: {
-    theme(val) {
-      const oldVal = this.theme
-      if (typeof val !== 'string') return
-      const themeCluster = this.getThemeCluster(val.replace('#', ''))
-      const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
-      console.log(themeCluster, originalCluster)
-      const getHandler = (variable, id) => {
-        return () => {
-          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
-          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
-
-          let styleTag = document.getElementById(id)
-          if (!styleTag) {
-            styleTag = document.createElement('style')
-            styleTag.setAttribute('id', id)
-            document.head.appendChild(styleTag)
-          }
-          styleTag.innerText = newStyle
-        }
-      }
-
-      const chalkHandler = getHandler('chalk', 'chalk-style')
-
-      if (!this.chalk) {
-        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        this.getCSSString(url, chalkHandler, 'chalk')
-      } else {
-        chalkHandler()
-      }
-
-      const styles = [].slice.call(document.querySelectorAll('style'))
-        .filter(style => {
-          const text = style.innerText
-          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
-        })
-      styles.forEach(style => {
-        const { innerText } = style
-        if (typeof innerText !== 'string') return
-        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
-      })
-      this.$message({
-        message: '换肤成功',
-        type: 'success'
-      })
-    }
-  },
-
-  methods: {
-    updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style
-      oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
-      })
-      return newStyle
-    },
-
-    getCSSString(url, callback, variable) {
-      const xhr = new XMLHttpRequest()
-      xhr.onreadystatechange = () => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-          callback()
-        }
-      }
-      xhr.open('GET', url)
-      xhr.send()
-    },
-
-    getThemeCluster(theme) {
-      const tintColor = (color, tint) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
-
-        if (tint === 0) { // when primary color is in its rgb space
-          return [red, green, blue].join(',')
-        } else {
-          red += Math.round(tint * (255 - red))
-          green += Math.round(tint * (255 - green))
-          blue += Math.round(tint * (255 - blue))
-
-          red = red.toString(16)
-          green = green.toString(16)
-          blue = blue.toString(16)
-
-          return `#${red}${green}${blue}`
-        }
-      }
-
-      const shadeColor = (color, shade) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
-
-        red = Math.round((1 - shade) * red)
-        green = Math.round((1 - shade) * green)
-        blue = Math.round((1 - shade) * blue)
-
-        red = red.toString(16)
-        green = green.toString(16)
-        blue = blue.toString(16)
-
-        return `#${red}${green}${blue}`
-      }
-
-      const clusters = [theme]
-      for (let i = 0; i <= 9; i++) {
-        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
-      }
-      clusters.push(shadeColor(theme, 0.1))
-      return clusters
-    }
-  }
-}
-</script>
-
-<style>
-.theme-picker .el-color-picker__trigger {
-  margin-top: 12px;
-  height: 26px!important;
-  width: 26px!important;
-  padding: 2px;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
-}
-</style>
diff --git a/src/components/element-ui/TreeTable/eval.js b/src/components/element-ui/TreeTable/eval.js
deleted file mode 100644
index d9b89e1c..00000000
--- a/src/components/element-ui/TreeTable/eval.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
-* @Author: jianglei
-* @Date:   2017-10-12 12:06:49
-*/
-'use strict'
-import Vue from 'vue'
-export default function treeToArray(data, expandAll, parent = null, level = null) {
-  let tmp = []
-  Array.from(data).forEach(function(record) {
-    if (record._expanded === undefined) {
-      Vue.set(record, '_expanded', expandAll)
-    }
-    let _level = 1
-    if (level !== undefined && level !== null) {
-      _level = level + 1
-    }
-    Vue.set(record, '_level', _level)
-    // 如果有父元素
-    if (parent) {
-      Vue.set(record, 'parent', parent)
-    }
-    tmp.push(record)
-    if (record.children && record.children.length > 0) {
-      const children = treeToArray(record.children, expandAll, record, _level)
-      tmp = tmp.concat(children)
-    }
-  })
-  return tmp
-}
diff --git a/src/components/element-ui/TreeTable/index.vue b/src/components/element-ui/TreeTable/index.vue
deleted file mode 100644
index a48765c8..00000000
--- a/src/components/element-ui/TreeTable/index.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
-    <el-table-column v-if="columns.length===0" width="150">
-      <template slot-scope="scope">
-        <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
-        <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
-          <i v-if="!scope.row._expanded" class="el-icon-plus"/>
-          <i v-else class="el-icon-minus"/>
-        </span>
-        {{ scope.$index }}
-      </template>
-    </el-table-column>
-    <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
-      <template slot-scope="scope">
-        <!-- Todo -->
-        <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
-        <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
-        <span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
-          <i v-if="!scope.row._expanded" class="el-icon-plus"/>
-          <i v-else class="el-icon-minus"/>
-        </span>
-        {{ scope.row[column.value] }}
-      </template>
-    </el-table-column>
-    <slot/>
-  </el-table>
-</template>
-
-<script>
-/**
-  Auth: Lei.j1ang
-  Created: 2018/1/19-13:59
-*/
-import treeToArray from './eval'
-export default {
-  name: 'TreeTable',
-  props: {
-    /* eslint-disable */
-    data: {
-      type: [Array, Object],
-      required: true
-    },
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    evalFunc: Function,
-    evalArgs: Array,
-    expandAll: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    // 格式化数据源
-    formatData: function() {
-      let tmp
-      if (!Array.isArray(this.data)) {
-        tmp = [this.data]
-      } else {
-        tmp = this.data
-      }
-      const func = this.evalFunc || treeToArray
-      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
-      return func.apply(null, args)
-    }
-  },
-  methods: {
-    showRow: function(row) {
-      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
-      row.row._show = show
-      return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
-    },
-    // 切换下级是否展开
-    toggleExpanded: function(trIndex) {
-      const record = this.formatData[trIndex]
-      record._expanded = !record._expanded
-    },
-    // 图标显示
-    iconShow(index, record) {
-      return (index === 0 && record.children && record.children.length > 0)
-    }
-  }
-}
-</script>
-<style rel="stylesheet/css">
-  @keyframes treeTableShow {
-    from {opacity: 0;}
-    to {opacity: 1;}
-  }
-  @-webkit-keyframes treeTableShow {
-    from {opacity: 0;}
-    to {opacity: 1;}
-  }
-</style>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-  $color-blue: #2196F3;
-  $space-width: 18px;
-  .ms-tree-space {
-    position: relative;
-    top: 1px;
-    display: inline-block;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1;
-    width: $space-width;
-    height: 14px;
-    &::before {
-      content: ""
-    }
-  }
-  .processContainer{
-    width: 100%;
-    height: 100%;
-  }
-  table td {
-    line-height: 26px;
-  }
-
-  .tree-ctrl{
-    position: relative;
-    cursor: pointer;
-    color: $color-blue;
-    margin-left: -$space-width;
-  }
-</style>
diff --git a/src/components/element-ui/TreeTable/readme.md b/src/components/element-ui/TreeTable/readme.md
deleted file mode 100644
index 5b598e11..00000000
--- a/src/components/element-ui/TreeTable/readme.md
+++ /dev/null
@@ -1,89 +0,0 @@
-## 写在前面
-此组件仅提供一个创建TreeTable的解决思路
-
-## prop说明
-#### *data*
-  **必填**
-
-  原始数据,要求是一个数组或者对象
-  ```javascript
-    [{
-      key1: value1,
-      key2: value2,
-      children: [{
-        key1: value1
-      },
-      {
-        key1: value1
-      }]
-    },
-    {
-      key1: value1
-    }]
-  ```
-  或者
- ```javascript
-    {
-      key1: value1,
-      key2: value2,
-      children: [{
-        key1: value1
-      },
-      {
-        key1: value1
-      }]
-    }
-  ```
-
-#### columns
-  列属性,要求是一个数组
-
-  1. text: 显示在表头的文字
-  2. value: 对应data的key。treeTable将显示相应的value
-  3. width: 每列的宽度，为一个数字(可选)
-
-  如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
-
-  如果你有几个字段是需要自定义的，几个不需要，那么可以将不需要自定义的字段放入columns，将需要自定义的内容放入到slot中，详情见后文
-  ```javascript
-  [{
-    value:string,
-    text:string,
-    width:number
-  },{
-    value:string,
-    text:string,
-    width:number
-  }]
-  ```
-
-#### expandAll
-  是否默认全部展开，boolean值，默认为false
-
-#### evalFunc
-  解析函数，function，非必须
-
-  如果不提供，将使用默认的[evalFunc](./eval.js)
-
-  如果提供了evalFunc,那么会用提供的evalFunc去解析data，并返回treeTable渲染所需要的值。如何编写一个evalFunc，请参考[*eval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/TreeTable/eval.js)或[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)
-
-#### evalArgs
-  解析函数的参数，是一个数组
-
-  **请注意，自定义的解析函数参数第一个为this.data，第二个参数为， this.expandAll,你不需要在evalArgs填写。一定记住，这两个参数是强制性的，并且位置不可颠倒** *this.data为需要解析的数据，this.expandAll为是否默认展开*
-
-  如你的解析函数需要的参数为`(this.data, this.expandAll,1,2,3,4)`，那么你只需要将`[1,2,3,4]`赋值给`evalArgs`就可以了
-
-  如果你的解析函数参数只有`(this.data, this.expandAll)`,那么就可以不用填写evalArgs了
-
-  具体可参考[*customEval.js*](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customEval.js)的函数参数和[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue)的`evalArgs`属性值
-
- ## slot
- 这是一个自定义列的插槽。
-
- 默认情况下，treeTable只有一行行展示数据的功能。但是一般情况下，我们会要给行加上一个操作按钮或者根据当行数据展示不同的样式，这时我们就需要自定义列了。请参考[customTreeTable](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/table/treeTable/customTreeTable.vue)，[实例效果](https://panjiachen.github.io/vue-element-admin/#/table/tree-table)
-
- `slot`和`columns属性`可同时存在,columns里面的数据列会在slot自定义列的左边展示
-
- ## 其他
-  如果有其他的需求，请参考[el-table](http://element-cn.eleme.io/#/en-US/component/table)的api自行修改index.vue
diff --git a/src/components/element-ui/Upload/singleImage.vue b/src/components/element-ui/Upload/singleImage.vue
deleted file mode 100644
index 89a1bfa4..00000000
--- a/src/components/element-ui/Upload/singleImage.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div class="upload-container">
-    <el-upload
-      :data="dataObj"
-      :multiple="false"
-      :show-file-list="false"
-      :on-success="handleImageSuccess"
-      class="image-uploader"
-      drag
-      action="https://httpbin.org/post">
-      <i class="el-icon-upload"/>
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-    </el-upload>
-    <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// 预览效果见付费文章
-import { getToken } from '@/api/qiniu'
-
-export default {
-  name: 'SingleImageUpload',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data: function() {
-    return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
-  },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
-  methods: {
-    rmImage() {
-      this.emitInput('')
-    },
-    emitInput(val) {
-      this.$emit('input', val)
-    },
-    handleImageSuccess() {
-      this.emitInput(this.tempUrl)
-    },
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-    @import "src/styles/mixin.scss";
-    .upload-container {
-        width: 100%;
-        position: relative;
-        @include clearfix;
-        .image-uploader {
-            width: 60%;
-            float: left;
-        }
-        .image-preview {
-            width: 200px;
-            height: 200px;
-            position: relative;
-            border: 1px dashed #d9d9d9;
-            float: left;
-            margin-left: 50px;
-            .image-preview-wrapper {
-                position: relative;
-                width: 100%;
-                height: 100%;
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            .image-preview-action {
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                cursor: default;
-                text-align: center;
-                color: #fff;
-                opacity: 0;
-                font-size: 20px;
-                background-color: rgba(0, 0, 0, .5);
-                transition: opacity .3s;
-                cursor: pointer;
-                text-align: center;
-                line-height: 200px;
-                .el-icon-delete {
-                    font-size: 36px;
-                }
-            }
-            &:hover {
-                .image-preview-action {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
-</style>
diff --git a/src/components/element-ui/Upload/singleImage2.vue b/src/components/element-ui/Upload/singleImage2.vue
deleted file mode 100644
index 96c4402b..00000000
--- a/src/components/element-ui/Upload/singleImage2.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div class="singleImageUpload2 upload-container">
-    <el-upload
-      :data="dataObj"
-      :multiple="false"
-      :show-file-list="false"
-      :on-success="handleImageSuccess"
-      class="image-uploader"
-      drag
-      action="https://httpbin.org/post">
-      <i class="el-icon-upload"/>
-      <div class="el-upload__text">Drag或<em>点击上传</em></div>
-    </el-upload>
-    <div v-show="imageUrl.length>0" class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getToken } from '@/api/qiniu'
-
-export default {
-  name: 'SingleImageUpload2',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data: function() {
-    return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
-  },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
-  methods: {
-    rmImage() {
-      this.emitInput('')
-    },
-    emitInput(val) {
-      this.$emit('input', val)
-    },
-    handleImageSuccess() {
-      this.emitInput(this.tempUrl)
-    },
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(() => {
-          reject(false)
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.upload-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  .image-uploader {
-    height: 100%;
-  }
-  .image-preview {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    border: 1px dashed #d9d9d9;
-    .image-preview-wrapper {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .image-preview-action {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      cursor: default;
-      text-align: center;
-      color: #fff;
-      opacity: 0;
-      font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
-      cursor: pointer;
-      text-align: center;
-      line-height: 200px;
-      .el-icon-delete {
-        font-size: 36px;
-      }
-    }
-    &:hover {
-      .image-preview-action {
-        opacity: 1;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/element-ui/Upload/singleImage3.vue b/src/components/element-ui/Upload/singleImage3.vue
deleted file mode 100644
index efa5b2d2..00000000
--- a/src/components/element-ui/Upload/singleImage3.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-  <div class="upload-container">
-    <el-upload
-      :data="dataObj"
-      :multiple="false"
-      :show-file-list="false"
-      :on-success="handleImageSuccess"
-      class="image-uploader"
-      drag
-      action="https://httpbin.org/post">
-      <i class="el-icon-upload"/>
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-    </el-upload>
-    <div class="image-preview image-app-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
-        </div>
-      </div>
-    </div>
-    <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl">
-        <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage"/>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getToken } from '@/api/qiniu'
-
-export default {
-  name: 'SingleImageUpload3',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data: function() {
-    return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
-  },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
-  methods: {
-    rmImage() {
-      this.emitInput('')
-    },
-    emitInput(val) {
-      this.$emit('input', val)
-    },
-    handleImageSuccess(file) {
-      this.emitInput(file.files.file)
-    },
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        getToken().then(response => {
-          const key = response.data.qiniu_key
-          const token = response.data.qiniu_token
-          _self._data.dataObj.token = token
-          _self._data.dataObj.key = key
-          this.tempUrl = response.data.qiniu_url
-          resolve(true)
-        }).catch(err => {
-          console.log(err)
-          reject(false)
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~@/styles/mixin.scss";
-.upload-container {
-  width: 100%;
-  position: relative;
-  @include clearfix;
-  .image-uploader {
-    width: 35%;
-    float: left;
-  }
-  .image-preview {
-    width: 200px;
-    height: 200px;
-    position: relative;
-    border: 1px dashed #d9d9d9;
-    float: left;
-    margin-left: 50px;
-    .image-preview-wrapper {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .image-preview-action {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      cursor: default;
-      text-align: center;
-      color: #fff;
-      opacity: 0;
-      font-size: 20px;
-      background-color: rgba(0, 0, 0, .5);
-      transition: opacity .3s;
-      cursor: pointer;
-      text-align: center;
-      line-height: 200px;
-      .el-icon-delete {
-        font-size: 36px;
-      }
-    }
-    &:hover {
-      .image-preview-action {
-        opacity: 1;
-      }
-    }
-  }
-  .image-app-preview {
-    width: 320px;
-    height: 180px;
-    position: relative;
-    border: 1px dashed #d9d9d9;
-    float: left;
-    margin-left: 50px;
-    .app-fake-conver {
-      height: 44px;
-      position: absolute;
-      width: 100%; // background: rgba(0, 0, 0, .1);
-      text-align: center;
-      line-height: 64px;
-      color: #fff;
-    }
-  }
-}
-</style>