diff --git a/vue/element-ui-personal/component/Select/Select.vue b/vue/element-ui-personal/component/Select/Select.vue
deleted file mode 100644
index 7f10914..0000000
--- a/vue/element-ui-personal/component/Select/Select.vue
+++ /dev/null
@@ -1,844 +0,0 @@
-<template>
-    <div
-        v-clickoutside="handleClose"
-        class="el-select"
-        :class="[selectSize ? 'el-select--' + selectSize : '']"
-        @click.stop="toggleMenu"
-    >
-        <div
-            v-if="multiple"
-            ref="tags"
-            class="el-select__tags"
-            :style="{ 'max-width': inputWidth - 32 + 'px', width: '100%' }"
-        >
-
-            <transition-group @after-leave="resetInputHeight">
-                <el-tag
-                    v-for="item in selected"
-                    :key="getValueKey(item)"
-                    :closable="!selectDisabled"
-                    :size="collapseTagSize"
-                    :hit="item.hitState"
-                    type="info"
-                    @close="deleteTag($event, item)"
-                    disable-transitions
-                >
-                    <span class="el-select__tags-text">{{ item.currentLabel }}</span>
-                </el-tag>
-            </transition-group>
-            <input
-                type="text"
-                class="el-select__input"
-                :class="[selectSize ? `is-${ selectSize }` : '']"
-                :disabled="selectDisabled"
-                :autocomplete="autocomplete"
-                @focus="handleFocus"
-                @blur="softFocus = false"
-                @keyup="managePlaceholder"
-                @keydown="resetInputState"
-                @keydown.down.prevent="navigateOptions('next')"
-                @keydown.up.prevent="navigateOptions('prev')"
-                @keydown.enter.prevent="selectOption"
-                @keydown.esc.stop.prevent="visible = false"
-                @keydown.delete="deletePrevTag"
-                @keydown.tab="visible = false"
-                @compositionstart="handleComposition"
-                @compositionupdate="handleComposition"
-                @compositionend="handleComposition"
-                v-model="query"
-                @input="debouncedQueryChange"
-                v-if="filterable"
-                :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }"
-                ref="input">
-        </div>
-        <el-input
-            ref="reference"
-            v-model="selectedLabel"
-            type="text"
-            :placeholder="currentPlaceholder"
-            :name="name"
-            :id="id"
-            :autocomplete="autocomplete"
-            :size="selectSize"
-            :disabled="selectDisabled"
-            :readonly="readonly"
-            :validate-event="false"
-            :class="{ 'is-focus': visible }"
-            :tabindex="(multiple && filterable) ? '-1' : null"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            @keyup.native="debouncedOnInputChange"
-            @keydown.native.down.stop.prevent="navigateOptions('next')"
-            @keydown.native.up.stop.prevent="navigateOptions('prev')"
-            @keydown.native.enter.prevent="selectOption"
-            @keydown.native.esc.stop.prevent="visible = false"
-            @keydown.native.tab="visible = false"
-            @paste.native="debouncedOnInputChange"
-            @mouseenter.native="inputHovering = true"
-            @mouseleave.native="inputHovering = false">
-            <template slot="prefix" v-if="$slots.prefix">
-                <slot name="prefix"/>
-            </template>
-            <template slot="suffix">
-                <i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"/>
-                <i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close"
-                   @click="handleClearClick"/>
-            </template>
-        </el-input>
-        <transition :name="transition" @before-enter="handleMenuEnter" @after-leave="doDestroy">
-            <el-select-menu
-                v-show="visible && emptyText !== false"
-                placement="bottom"
-                :append-to-body="popperAppendToBody"
-            >
-                <el-scrollbar
-                    ref="scrollbar"
-                    v-show="options.length > 0 && !loading"
-                    :class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
-                    tag="ul"
-                    wrap-class="el-select-dropdown__wrap"
-                    view-class="el-select-dropdown__list"
-                >
-                    <el-option v-if="showNewOption" :value="query" created/>
-                    <slot/>
-                </el-scrollbar>
-                <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
-                    <slot name="empty" v-if="$slots.empty"/>
-                    <p class="el-select-dropdown__empty" v-else>{{ emptyText }}</p>
-                </template>
-            </el-select-menu>
-        </transition>
-    </div>
-</template>
-
-<script>
-import Emitter from 'element-ui/lib/mixins/emitter'
-import Focus from 'element-ui/lib/mixins/focus'
-import Locale from 'element-ui/lib/mixins/locale'
-import ElSelectMenu from './SelectDropdown.vue'
-import {debounce} from '@/util'
-import Clickoutside from 'element-ui/lib/utils/clickoutside'
-import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event'
-import {t} from 'element-ui/lib/locale'
-import scrollIntoView from 'element-ui/lib/utils/scroll-into-view'
-import {getValueByPath, isEdge, isIE, valueEquals} from 'element-ui/lib/utils/util'
-import NavigationMixin from 'element-ui/packages/select/src/navigation-mixin'
-import {isKorean} from 'element-ui/lib/utils/shared'
-
-export default {
-    mixins: [Emitter, Locale, Focus('reference'), NavigationMixin],
-
-    name: 'ElSelect',
-
-    componentName: 'ElSelect',
-
-    inject: {
-        elForm: {
-            default: ''
-        },
-
-        elFormItem: {
-            default: ''
-        }
-    },
-
-    provide() {
-        return {
-            'select': this
-        }
-    },
-
-    components: {ElSelectMenu},
-
-    directives: {Clickoutside},
-
-    props: {
-        name: String,
-        id: String,
-        value: {required: true},
-        transition: {type: String, default: 'el-zoom-in-top'},
-        autocomplete: {type: String, default: 'off'},
-        automaticDropdown: Boolean,
-        size: String,
-        disabled: Boolean,
-        clearable: Boolean,
-        filterable: Boolean,
-        allowCreate: Boolean,
-        loading: Boolean,
-        popperClass: String,
-        remote: Boolean,
-        loadingText: String,
-        noMatchText: String,
-        noDataText: String,
-        remoteMethod: Function,
-        filterMethod: Function,
-        multiple: Boolean,
-        multipleLimit: {type: Number, default: 0},
-        placeholder: {
-            type: String,
-            default() {
-                return t('el.select.placeholder')
-            }
-        },
-        defaultFirstOption: Boolean,
-        reserveKeyword: Boolean,
-        valueKey: {type: String, default: 'value'},
-        popperAppendToBody: Boolean
-    },
-
-    data() {
-        return {
-            options: [],
-            cachedOptions: [],
-            createdLabel: null,
-            createdSelected: false,
-            selected: this.multiple ? [] : {},
-            inputLength: 20,
-            inputWidth: 0,
-            initialInputHeight: 0,
-            cachedPlaceHolder: '',
-            optionsCount: 0,
-            filteredOptionsCount: 0,
-            visible: false,
-            softFocus: false,
-            selectedLabel: '',
-            hoverIndex: -1,
-            query: '',
-            previousQuery: null,
-            inputHovering: false,
-            currentPlaceholder: '',
-            menuVisibleOnFocus: false,
-            isOnComposition: false,
-            isSilentBlur: false
-        }
-    },
-
-    computed: {
-        _elFormItemSize() {
-            return (this.elFormItem || {}).elFormItemSize
-        },
-
-        readonly() {
-            return !this.filterable || this.multiple || (!isIE() && !isEdge() && !this.visible)
-        },
-
-        showClose() {
-            let hasValue = this.multiple
-                ? Array.isArray(this.value) && this.value.length > 0
-                : this.value !== undefined && this.value !== null && this.value !== ''
-            return this.clearable &&
-                !this.selectDisabled &&
-                this.inputHovering &&
-                hasValue
-        },
-
-        iconClass() {
-            return this.remote && this.filterable ? '' : (this.visible ? 'arrow-up is-reverse' : 'arrow-up')
-        },
-
-        debounce() {
-            return this.remote ? 300 : 0
-        },
-
-        emptyText() {
-            if (this.loading) {
-                return this.loadingText || this.t('el.select.loading')
-            }
-            else {
-                if (this.remote && this.query === '' && this.options.length === 0) return false
-                if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
-                    return this.noMatchText || this.t('el.select.noMatch')
-                }
-                if (this.options.length === 0) {
-                    return this.noDataText || this.t('el.select.noData')
-                }
-            }
-            return null
-        },
-
-        showNewOption() {
-            let hasExistingOption = this.options.filter(option => !option.created)
-                .some(option => option.currentLabel === this.query)
-            return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption
-        },
-
-        selectSize() {
-            return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
-        },
-
-        selectDisabled() {
-            return this.disabled || (this.elForm || {}).disabled
-        },
-
-        collapseTagSize() {
-            return ['small', 'mini'].indexOf(this.selectSize) > -1
-                ? 'mini'
-                : 'small'
-        }
-    },
-
-    watch: {
-        selectDisabled() {
-            this.$nextTick(() => {
-                this.resetInputHeight()
-            })
-        },
-
-        placeholder(val) {
-            this.cachedPlaceHolder = this.currentPlaceholder = val
-        },
-
-        value(val, oldVal) {
-            if (this.multiple) {
-                this.resetInputHeight()
-                if ((val && val.length > 0) || (this.$refs.input && this.query !== '')) {
-                    this.currentPlaceholder = ''
-                }
-                else {
-                    this.currentPlaceholder = this.cachedPlaceHolder
-                }
-                if (this.filterable && !this.reserveKeyword) {
-                    this.query = ''
-                    this.handleQueryChange(this.query)
-                }
-            }
-            this.setSelected()
-            if (this.filterable && !this.multiple) {
-                this.inputLength = 20
-            }
-            if (!valueEquals(val, oldVal)) {
-                this.dispatch('ElFormItem', 'el.form.change', val)
-            }
-        },
-
-        visible(val) {
-            if (!val) {
-                this.broadcast('ElSelectDropdown', 'destroyPopper')
-                if (this.$refs.input) {
-                    this.$refs.input.blur()
-                }
-                this.query = ''
-                this.previousQuery = null
-                this.selectedLabel = ''
-                this.inputLength = 20
-                this.menuVisibleOnFocus = false
-                this.resetHoverIndex()
-                this.$nextTick(() => {
-                    if (this.$refs.input &&
-                        this.$refs.input.value === '' &&
-                        this.selected.length === 0) {
-                        this.currentPlaceholder = this.cachedPlaceHolder
-                    }
-                })
-                if (!this.multiple) {
-                    if (this.selected) {
-                        if (this.filterable && this.allowCreate &&
-                            this.createdSelected && this.createdLabel) {
-                            this.selectedLabel = this.createdLabel
-                        }
-                        else {
-                            this.selectedLabel = this.selected.currentLabel
-                        }
-                        if (this.filterable) this.query = this.selectedLabel
-                    }
-
-                    if (this.filterable) {
-                        this.currentPlaceholder = this.cachedPlaceHolder
-                    }
-                }
-            }
-            else {
-                this.broadcast('ElSelectDropdown', 'updatePopper')
-                if (this.filterable) {
-                    this.query = this.remote ? '' : this.selectedLabel
-                    this.handleQueryChange(this.query)
-                    if (this.multiple) {
-                        this.$refs.input.focus()
-                    }
-                    else {
-                        if (!this.remote) {
-                            this.broadcast('ElOption', 'queryChange', '')
-                            this.broadcast('ElOptionGroup', 'queryChange')
-                        }
-
-                        if (this.selectedLabel) {
-                            this.currentPlaceholder = this.selectedLabel
-                            this.selectedLabel = ''
-                        }
-                    }
-                }
-            }
-            this.$emit('visible-change', val)
-        },
-
-        options() {
-            if (this.$isServer) return
-            this.$nextTick(() => {
-                this.broadcast('ElSelectDropdown', 'updatePopper')
-            })
-            if (this.multiple) {
-                this.resetInputHeight()
-            }
-            let inputs = this.$el.querySelectorAll('input')
-            if ([].indexOf.call(inputs, document.activeElement) === -1) {
-                this.setSelected()
-            }
-            if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
-                this.checkDefaultFirstOption()
-            }
-        }
-    },
-
-    methods: {
-        handleComposition(event) {
-            const text = event.target.value
-            if (event.type === 'compositionend') {
-                this.isOnComposition = false
-                this.$nextTick(_ => this.handleQueryChange(text))
-            }
-            else {
-                const lastCharacter = text[text.length - 1] || ''
-                this.isOnComposition = !isKorean(lastCharacter)
-            }
-        },
-        handleQueryChange(val) {
-            if (this.previousQuery === val || this.isOnComposition) return
-            if (
-                this.previousQuery === null &&
-                (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')
-            ) {
-                this.previousQuery = val
-                return
-            }
-            this.previousQuery = val
-            this.$nextTick(() => {
-                if (this.visible) this.broadcast('ElSelectDropdown', 'updatePopper')
-            })
-            this.hoverIndex = -1
-            if (this.multiple && this.filterable) {
-                this.$nextTick(() => {
-                    this.inputLength = this.$refs.input.value.length * 15 + 20
-                    this.managePlaceholder()
-                    this.resetInputHeight()
-                })
-            }
-            if (this.remote && typeof this.remoteMethod === 'function') {
-                this.hoverIndex = -1
-                this.remoteMethod(val)
-            }
-            else if (typeof this.filterMethod === 'function') {
-                this.filterMethod(val)
-                this.broadcast('ElOptionGroup', 'queryChange')
-            }
-            else {
-                this.filteredOptionsCount = this.optionsCount
-                this.broadcast('ElOption', 'queryChange', val)
-                this.broadcast('ElOptionGroup', 'queryChange')
-            }
-            if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
-                this.checkDefaultFirstOption()
-            }
-        },
-
-        scrollToOption(option) {
-            const target = Array.isArray(option) && option[0] ? option[0].$el : option.$el
-            if (this.$refs.popper && target) {
-                const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap')
-                scrollIntoView(menu, target)
-            }
-            this.$refs.scrollbar && this.$refs.scrollbar.handleScroll()
-        },
-
-        handleMenuEnter() {
-            this.$nextTick(() => this.scrollToOption(this.selected))
-        },
-
-        emitChange(val) {
-            if (!valueEquals(this.value, val)) {
-                this.$emit('change', val)
-            }
-        },
-
-        getOption(value) {
-            const type = v => Object.prototype.toString.call(v).toLowerCase()
-            const isObject = type(value) === '[object object]'
-            const isNull = type(value) === '[object null]'
-            const isUndefined = type(value) === '[object undefined]'
-
-            for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
-                const cachedOption = this.cachedOptions[i]
-                const isEqual = isObject
-                    ? getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey)
-                    : cachedOption.value === value
-                if (isEqual) return cachedOption
-            }
-
-            const label = (!isObject && !isNull && !isUndefined) ? value : ''
-            const newOption = {
-                value: value,
-                currentLabel: label
-            }
-            if (this.multiple) {
-                newOption.hitState = false
-            }
-            return newOption
-        },
-
-        setSelected() {
-            if (!this.multiple) {
-                let option = this.getOption(this.value)
-                if (option.created) {
-                    this.createdLabel = option.currentLabel
-                    this.createdSelected = true
-                }
-                else {
-                    this.createdSelected = false
-                }
-                this.selectedLabel = option.currentLabel
-                this.selected = option
-                if (this.filterable) this.query = this.selectedLabel
-                return
-            }
-            let result = []
-            if (Array.isArray(this.value)) {
-                this.value.forEach(value => {
-                    result.push(this.getOption(value))
-                })
-            }
-            this.selected = result
-            this.$nextTick(() => this.resetInputHeight())
-        },
-
-        handleFocus(event) {
-            if (!this.softFocus) {
-                if (this.automaticDropdown || this.filterable) {
-                    this.visible = true
-                    if (this.filterable) {
-                        this.menuVisibleOnFocus = true
-                    }
-                }
-                this.$emit('focus', event)
-            }
-            else {
-                this.softFocus = false
-            }
-        },
-
-        blur() {
-            this.visible = false
-            this.$refs.reference.blur()
-        },
-
-        handleBlur(event) {
-            setTimeout(() => {
-                if (this.isSilentBlur) {
-                    this.isSilentBlur = false
-                }
-                else {
-                    this.$emit('blur', event)
-                }
-            }, 50)
-            this.softFocus = false
-        },
-
-        handleClearClick(event) {
-            this.deleteSelected(event)
-        },
-
-        doDestroy() {
-            this.$refs.popper && this.$refs.popper.doDestroy()
-        },
-
-        handleClose() {
-            this.visible = false
-        },
-
-        toggleLastOptionHitState(hit) {
-            if (!Array.isArray(this.selected)) return
-            const option = this.selected[this.selected.length - 1]
-            if (!option) return
-
-            if (hit === true || hit === false) {
-                option.hitState = hit
-                return hit
-            }
-
-            option.hitState = !option.hitState
-            return option.hitState
-        },
-
-        deletePrevTag(e) {
-            if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
-                const value = this.value.slice()
-                value.pop()
-                this.$emit('input', value)
-                this.emitChange(value)
-            }
-        },
-
-        managePlaceholder() {
-            if (this.currentPlaceholder !== '') {
-                this.currentPlaceholder = this.$refs.input.value ? '' : this.cachedPlaceHolder
-            }
-        },
-
-        resetInputState(e) {
-            if (e.keyCode !== 8) this.toggleLastOptionHitState(false)
-            this.inputLength = this.$refs.input.value.length * 15 + 20
-            this.resetInputHeight()
-        },
-
-        resetInputHeight() {
-            this.$nextTick(() => {
-                if (!this.$refs.reference) return
-                let inputChildNodes = this.$refs.reference.$el.childNodes
-                let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]
-                const tags = this.$refs.tags
-                const sizeInMap = this.initialInputHeight || 40
-                input.style.height = this.selected.length === 0
-                    ? sizeInMap + 'px'
-                    : Math.max(
-                    tags ? (tags.clientHeight + (tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
-                    sizeInMap
-                ) + 'px'
-                if (this.visible && this.emptyText !== false) {
-                    this.broadcast('ElSelectDropdown', 'updatePopper')
-                }
-            })
-        },
-
-        resetHoverIndex() {
-            setTimeout(() => {
-                if (!this.multiple) {
-                    this.hoverIndex = this.options.indexOf(this.selected)
-                }
-                else {
-                    if (this.selected.length > 0) {
-                        this.hoverIndex = Math.min.apply(null, this.selected.map(item => this.options.indexOf(item)))
-                    }
-                    else {
-                        this.hoverIndex = -1
-                    }
-                }
-            }, 300)
-        },
-
-        handleOptionSelect(option, byClick) {
-            if (this.multiple) {
-                const value = (this.value || []).slice()
-                const optionIndex = this.getValueIndex(value, option.value)
-                if (optionIndex > -1) {
-                    value.splice(optionIndex, 1)
-                }
-                else if (this.multipleLimit <= 0 || value.length < this.multipleLimit) {
-                    value.push(option.value)
-                }
-                this.$emit('input', value)
-                this.emitChange(value)
-                if (option.created) {
-                    this.query = ''
-                    this.handleQueryChange('')
-                    this.inputLength = 20
-                }
-                if (this.filterable) this.$refs.input.focus()
-            }
-            else {
-                this.$emit('input', option.value)
-                this.emitChange(option.value)
-                this.visible = false
-            }
-            this.isSilentBlur = byClick
-            this.setSoftFocus()
-            if (this.visible) return
-            this.$nextTick(() => {
-                this.scrollToOption(option)
-            })
-        },
-
-        setSoftFocus() {
-            this.softFocus = true
-            const input = this.$refs.input || this.$refs.reference
-            if (input) {
-                input.focus()
-            }
-        },
-
-        getValueIndex(arr = [], value) {
-            const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]'
-            if (!isObject) {
-                return arr.indexOf(value)
-            }
-            else {
-                const valueKey = this.valueKey
-                let index = -1
-                arr.some((item, i) => {
-                    if (getValueByPath(item, valueKey) === getValueByPath(value, valueKey)) {
-                        index = i
-                        return true
-                    }
-                    return false
-                })
-                return index
-            }
-        },
-
-        toggleMenu() {
-            if (!this.selectDisabled) {
-                if (this.menuVisibleOnFocus) {
-                    this.menuVisibleOnFocus = false
-                }
-                else {
-                    this.visible = !this.visible
-                }
-                if (this.visible) {
-                    (this.$refs.input || this.$refs.reference).focus()
-                }
-            }
-        },
-
-        selectOption() {
-            if (!this.visible) {
-                this.toggleMenu()
-            }
-            else {
-                if (this.options[this.hoverIndex]) {
-                    this.handleOptionSelect(this.options[this.hoverIndex])
-                }
-            }
-        },
-
-        deleteSelected(event) {
-            event.stopPropagation()
-            const value = this.multiple ? [] : ''
-            this.$emit('input', value)
-            this.emitChange(value)
-            this.visible = false
-            this.$emit('clear')
-        },
-
-        deleteTag(event, tag) {
-            const index = this.selected.indexOf(tag)
-            if (index > -1 && !this.selectDisabled) {
-                const value = this.value.slice()
-                value.splice(index, 1)
-                this.$emit('input', value)
-                this.emitChange(value)
-                this.$emit('remove-tag', tag.value)
-            }
-            event.stopPropagation()
-        },
-
-        onInputChange() {
-            if (this.filterable && this.query !== this.selectedLabel) {
-                this.query = this.selectedLabel
-                this.handleQueryChange(this.query)
-            }
-        },
-
-        onOptionDestroy(index) {
-            if (index > -1) {
-                this.optionsCount--
-                this.filteredOptionsCount--
-                this.options.splice(index, 1)
-            }
-        },
-
-        resetInputWidth() {
-            this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width
-        },
-
-        handleResize() {
-            this.resetInputWidth()
-            if (this.multiple) this.resetInputHeight()
-        },
-
-        checkDefaultFirstOption() {
-            this.hoverIndex = -1
-            // highlight the created option
-            let hasCreated = false
-            for (let i = this.options.length - 1; i >= 0; i--) {
-                if (this.options[i].created) {
-                    hasCreated = true
-                    this.hoverIndex = i
-                    break
-                }
-            }
-            if (hasCreated) return
-            for (let i = 0; i !== this.options.length; ++i) {
-                const option = this.options[i]
-                if (this.query) {
-                    // highlight first options that passes the filter
-                    if (!option.disabled && !option.groupDisabled && option.visible) {
-                        this.hoverIndex = i
-                        break
-                    }
-                }
-                else {
-                    // highlight currently selected option
-                    if (option.itemSelected) {
-                        this.hoverIndex = i
-                        break
-                    }
-                }
-            }
-        },
-
-        getValueKey(item) {
-            if (Object.prototype.toString.call(item.value).toLowerCase() !== '[object object]') {
-                return item.value
-            }
-            else {
-                return getValueByPath(item.value, this.valueKey)
-            }
-        }
-    },
-
-    created() {
-        this.cachedPlaceHolder = this.currentPlaceholder = this.placeholder
-        if (this.multiple && !Array.isArray(this.value)) {
-            this.$emit('input', [])
-        }
-        if (!this.multiple && Array.isArray(this.value)) {
-            this.$emit('input', '')
-        }
-
-        this.debouncedOnInputChange = debounce(this.onInputChange, this.debounce)
-
-        this.debouncedQueryChange = debounce(e => this.handleQueryChange(e.target.value), this.debounce)
-
-        this.$on('handleOptionClick', this.handleOptionSelect)
-        this.$on('setSelected', this.setSelected)
-    },
-
-    mounted() {
-        if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {
-            this.currentPlaceholder = ''
-        }
-        addResizeListener(this.$el, this.handleResize)
-
-        const reference = this.$refs.reference
-        if (reference && reference.$el) {
-            const sizeMap = {
-                medium: 36,
-                small: 32,
-                mini: 28
-            }
-            const input = reference.$el.querySelector('input')
-            this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize]
-        }
-        if (this.remote && this.multiple) {
-            this.resetInputHeight()
-        }
-        this.$nextTick(() => {
-            if (reference && reference.$el) {
-                this.inputWidth = reference.$el.getBoundingClientRect().width
-            }
-        })
-        this.setSelected()
-    },
-
-    beforeDestroy() {
-        if (this.$el && this.handleResize) removeResizeListener(this.$el, this.handleResize)
-    }
-}
-</script>
diff --git a/vue/element-ui-personal/component/Select/SelectDropdown.vue b/vue/element-ui-personal/component/Select/SelectDropdown.vue
deleted file mode 100644
index 7ea7802..0000000
--- a/vue/element-ui-personal/component/Select/SelectDropdown.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <div
-        class="el-select-dropdown el-popper"
-        :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
-        :style="{ minWidth }"
-    >
-        <slot/>
-    </div>
-</template>
-
-<script type="text/babel">
-import Popper from '@ele/mixin/vue-popper'
-
-export default {
-    name: 'ElSelectDropdown',
-
-    componentName: 'ElSelectDropdown',
-
-    mixins: [Popper],
-
-    data() {
-        return {
-            minWidth: ''
-        }
-    },
-
-    computed: {
-        popperClass() {
-            return this.$parent.popperClass
-        }
-    },
-
-    watch: {
-        '$parent.inputWidth'() {
-            this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px'
-        }
-    },
-
-    mounted() {
-        this.referenceElm = this.$parent.$refs.reference.$el
-        this.$parent.popperElm = this.popperElm = this.$el
-        this.$on('updatePopper', () => {
-            this.$parent.visible && this.updatePopper()
-        })
-        this.$on('destroyPopper', this.destroyPopper)
-    }
-}
-</script>
diff --git a/vue/element-ui-personal/index.js b/vue/element-ui-personal/index.js
index 00be8c7..1845aea 100644
--- a/vue/element-ui-personal/index.js
+++ b/vue/element-ui-personal/index.js
@@ -1,7 +1,6 @@
 import MenuItem from "./component/Menu/MenuItem"
 import Submenu from "./component/Menu/Submenu"
 import Message from "./component/Message"
-//import Select from './component/Select/Select'
 
 const components = [MenuItem, Submenu]
 
diff --git a/vue/element-ui-personal/mixin/vue-popper.js b/vue/element-ui-personal/mixin/vue-popper.js
deleted file mode 100644
index 905b752..0000000
--- a/vue/element-ui-personal/mixin/vue-popper.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import {PopupManager} from 'element-ui/lib/utils/popup'
-
-//import PopperJS from 'popper.js'
-//import * as PopperJS from '@popperjs/core'
-
-const POPPER_VERSION = 'v1'
-
-if (POPPER_VERSION === 'v2') {
-    console.warn = () => ({})
-}
-
-const stop = e => e.stopPropagation()
-
-const defaultOptions = () => {
-    return POPPER_VERSION === 'v2' ? {modifiers: []} : {modifiers: {computeStyle: {gpuAcceleration: false}}}
-}
-
-export default {
-    props: {
-        transformOrigin: {type: [Boolean, String], default: true},
-        placement: {type: String, default: 'bottom'},
-        boundariesPadding: {type: Number, default: 5},
-        reference: {},
-        popper: {},
-        offset: {type: Number, default: POPPER_VERSION === 'v2' ? 12 : 0},
-        value: Boolean,
-        visibleArrow: {type: Boolean, default: true},
-        arrowOffset: {type: Number, default: 35},
-        appendToBody: {type: Boolean, default: true},
-        popperOptions: {type: Object, default: defaultOptions}
-    },
-
-    data() {
-        return {
-            showPopper: this.value
-        }
-    },
-
-    watch: {
-        value: {
-            immediate: true,
-            handler(val) {
-                this.showPopper = val
-                this.$emit('input', val)
-                if (this.disabled) return
-                val ? this.updatePopper() : this.destroyPopper()
-            }
-        }
-    },
-
-    methods: {
-        createPopper() {
-            if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.placement)) {
-                return
-            }
-
-            const options = this.popperOptions
-            const popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper
-            let reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference
-
-            if (!reference && this.$slots.reference && this.$slots.reference[0]) {
-                reference = this.referenceElm = this.$slots.reference[0].elm
-            }
-
-            if (!popper || !reference) return
-
-            if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
-                this.popperJS.destroy()
-            }
-
-            if (this.appendToBody) document.body.appendChild(this.popperElm)
-            if (this.visibleArrow) this.setArrow()
-            this.setOffset(options)
-
-            options.placement = this.placement
-            const createEvent = POPPER_VERSION === 'v2' ? 'onFirstUpdate' : 'onCreate'
-            options[createEvent] = () => {
-                this.$emit('created', this)
-                this.resetTransformOrigin()
-                this.$nextTick(this.updatePopper)
-            }
-
-            this.popperJS = POPPER_VERSION === 'v2' ?
-                PopperJS.createPopper(reference, popper, options)
-                : new PopperJS(reference, popper, options)
-
-            popper.style.zIndex = PopupManager.nextZIndex()
-            this.popperElm.addEventListener('click', stop)
-        },
-
-        updatePopper() {
-            const popper = this.popperJS
-
-            if (!popper) return this.createPopper()
-
-            popper.update()
-            this.popperElm.style.zIndex = PopupManager.nextZIndex()
-        },
-
-        doDestroy(forceDestroy) {
-            if (!this.popperJS || (this.showPopper && !forceDestroy)) return
-            this.popperJS.destroy()
-            this.popperJS = null
-        },
-
-        destroyPopper() {
-            this.popperJS && this.resetTransformOrigin()
-        },
-
-        setOffset(options) {
-            if (POPPER_VERSION === 'v2') {
-                const modifier = this.popperOptions.modifiers.find(modifier => modifier.name === 'offset'),
-                    offset = {offset: [0, this.offset]}
-
-                if (!modifier) {
-                    this.popperOptions.modifiers.push({name: 'offset', options: offset})
-                }
-                else modifier.options = offset
-            }
-            else {
-                if (!options.modifiers.offset) {
-                    options.modifiers.offset = {}
-                }
-                options.modifiers.offset.offset = this.offset
-            }
-        },
-
-        setArrow() {
-            if (this.appended) return
-            this.appended = true
-
-            const arrow = document.createElement('div')
-            arrow.className = 'popper__arrow'
-            arrow.setAttribute(POPPER_VERSION === 'v2' ? 'data-popper-arrow' : 'x-arrow', '')
-            const attributes = this.popperElm.attributes
-            const key = Object.keys(attributes).find(key => /^_v-/.test(attributes[key].name))
-            if (key) arrow.setAttribute(attributes[key].name, '')
-
-            this.popperElm.appendChild(arrow)
-        },
-
-        resetTransformOrigin() {
-            if (!this.transformOrigin) return
-            const placementMap = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'}
-            const attr = POPPER_VERSION === 'v2' ? 'data-popper-placement' : 'x-placement'
-            const placement = this.popperElm.getAttribute(attr).split('-')[0]
-            const origin = placementMap[placement]
-            this.popperElm.style.transformOrigin =
-                typeof this.transformOrigin === 'string'
-                    ? this.transformOrigin
-                    : ['top', 'bottom'].includes(placement) ? `center ${origin}` : `${origin} center`
-        }
-    },
-
-    deactivated() {
-        this.$options.beforeDestroy[0].call(this)
-    },
-
-    beforeDestroy() {
-        this.doDestroy(true)
-        if (this.popperElm && this.popperElm.parentNode === document.body) {
-            this.popperElm.removeEventListener('click', stop)
-            document.body.removeChild(this.popperElm)
-        }
-    }
-}
diff --git a/vue/element-ui-personal/style/index.scss b/vue/element-ui-personal/style/index.scss
index 356699a..3424bf5 100644
--- a/vue/element-ui-personal/style/index.scss
+++ b/vue/element-ui-personal/style/index.scss
@@ -1,2 +1 @@
 @import "./message.scss";
-@import "./popper.scss";
diff --git a/vue/element-ui-personal/style/message.scss b/vue/element-ui-personal/style/message.scss
index 6336254..2ec0823 100644
--- a/vue/element-ui-personal/style/message.scss
+++ b/vue/element-ui-personal/style/message.scss
@@ -7,7 +7,7 @@
         position: absolute;
         box-shadow: 0 1px 3px rgba(#000, .2), 0 1px 1px rgba(#000, .14), 0 2px 1px -1px rgba(#000, .12);
         background-color: $--color-danger;
-        color: #fff;
+        color: #ffffff;
         border-radius: 4px;
         top: -10px;
         left: -10px;
diff --git a/vue/element-ui-personal/style/popper.scss b/vue/element-ui-personal/style/popper.scss
deleted file mode 100644
index 4640795..0000000
--- a/vue/element-ui-personal/style/popper.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@include b(popper) {
-    .popper__arrow,
-    .popper__arrow::after {
-        position: absolute;
-        display: block;
-        width: 0;
-        height: 0;
-        border-color: transparent;
-        border-style: solid;
-    }
-
-    .popper__arrow {
-        border-width: $--popover-arrow-size;
-        filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
-    }
-
-    .popper__arrow::after {
-        content: " ";
-        border-width: $--popover-arrow-size;
-    }
-
-    &[data-popper-placement^="top"] {
-        margin-bottom: #{$--popover-arrow-size + 6};
-    }
-
-    &[data-popper-placement^="top"] .popper__arrow {
-        bottom: -$--popover-arrow-size;
-        left: 50%;
-        margin-right: #{$--tooltip-arrow-size / 2};
-        border-top-color: $--popover-border-color;
-        border-bottom-width: 0;
-
-        &::after {
-            bottom: 1px;
-            margin-left: -$--popover-arrow-size;
-            border-top-color: $--popover-background-color;
-            border-bottom-width: 0;
-        }
-    }
-
-    &[data-popper-placement^="bottom"] {
-        margin-top: #{$--popover-arrow-size + 6};
-    }
-
-    &[data-popper-placement^="bottom"] .popper__arrow {
-        top: -$--popover-arrow-size;
-        left: 50%;
-        margin-right: #{$--tooltip-arrow-size / 2};
-        border-top-width: 0;
-        border-bottom-color: $--popover-border-color;
-
-        &::after {
-            top: 1px;
-            margin-left: -$--popover-arrow-size;
-            border-top-width: 0;
-            border-bottom-color: $--popover-background-color;
-        }
-    }
-
-    &[data-popper-placement^="right"] {
-        margin-left: #{$--popover-arrow-size + 6};
-    }
-
-    &[data-popper-placement^="right"] .popper__arrow {
-        top: 50%;
-        left: -$--popover-arrow-size;
-        margin-bottom: #{$--tooltip-arrow-size / 2};
-        border-right-color: $--popover-border-color;
-        border-left-width: 0;
-
-        &::after {
-            bottom: -$--popover-arrow-size;
-            left: 1px;
-            border-right-color: $--popover-background-color;
-            border-left-width: 0;
-        }
-    }
-
-    &[data-popper-placement^="left"] {
-        margin-right: #{$--popover-arrow-size + 6};
-    }
-
-    &[data-popper-placement^="left"] .popper__arrow {
-        top: 50%;
-        right: -$--popover-arrow-size;
-        margin-bottom: #{$--tooltip-arrow-size / 2};
-        border-right-width: 0;
-        border-left-color: $--popover-border-color;
-
-        &::after {
-            right: 1px;
-            bottom: -$--popover-arrow-size;
-            margin-left: -$--popover-arrow-size;
-            border-right-width: 0;
-            border-left-color: $--popover-background-color;
-        }
-    }
-}
diff --git a/vue/public/index.html b/vue/public/index.html
index cbcc7a6..fd96d29 100644
--- a/vue/public/index.html
+++ b/vue/public/index.html
@@ -15,7 +15,7 @@
             width: 100%;
             height: 100%;
             z-index: 999;
-            color: white;
+            color: #ffffff;
             background-color: #283443;
             display: flex;
             flex-direction: column;
diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss
index e1c3446..cca84a5 100644
--- a/vue/src/asset/style/element-ui.scss
+++ b/vue/src/asset/style/element-ui.scss
@@ -1,7 +1,7 @@
 // cover some element-ui styles
 .el-alert {
     &--info.is-light {
-        color: #515a6e;
+        color: #606266;
         background-color: #f0faff;
         border: 1px solid #abdcff;
 
@@ -57,7 +57,7 @@
     min-width: 384px;
 
     .el-dialog__header {
-        border-bottom: 1px solid #ebeef5;
+        border-bottom: 1px solid #EBEEF5;
         padding: 17px;
 
         .el-dialog__title {
@@ -72,7 +72,7 @@
     }
 
     .el-dialog__footer {
-        border-top: 1px solid #ebeef5;
+        border-top: 1px solid #EBEEF5;
         padding: 10px 16px;
     }
 
@@ -99,7 +99,7 @@
     border-width: 0;
 
     .el-message__icon, .el-message__content {
-        color: #fff !important;
+        color: #ffffff !important;
     }
 
     &.el-message--success {
@@ -165,7 +165,7 @@
 
 .el-table {
     thead {
-        color: rgba(0, 0, 0, .85)
+        color: #303133
     }
 
     thead > tr > th {
@@ -178,24 +178,3 @@
         background: transparent;
     }
 }
-
-.el-timeline {
-    padding-left: 1px;
-
-    .el-timeline__empty {
-        margin: 0 auto;
-        text-align: center;
-    }
-
-    .el-timeline-item__tail {
-        left: 5px;
-    }
-
-    .el-timeline-item__node--normal {
-        left: 0;
-    }
-
-    .el-scrollbar__wrap {
-        overflow-x: hidden;
-    }
-}
diff --git a/vue/src/component/AbstractForm/FormValidateInfo.vue b/vue/src/component/AbstractForm/FormValidateInfo.vue
index 12fc7bf..df9690b 100644
--- a/vue/src/component/AbstractForm/FormValidateInfo.vue
+++ b/vue/src/component/AbstractForm/FormValidateInfo.vue
@@ -110,7 +110,7 @@ export default {
 
     &-item {
         padding: 8px 16px;
-        background-color: #fff;
+        background-color: #ffffff;
         border-bottom: 1px solid #f0f0f0;
         cursor: pointer;
         transition: background-color .3s;
diff --git a/vue/src/component/ColorCheckBox/index.vue b/vue/src/component/ColorCheckBox/index.vue
index a823309..faf8e10 100644
--- a/vue/src/component/ColorCheckBox/index.vue
+++ b/vue/src/component/ColorCheckBox/index.vue
@@ -43,6 +43,6 @@ export default {
     margin-right: 8px;
     text-align: center;
     font-weight: bold;
-    color: #fff;
+    color: #ffffff;
 }
 </style>
diff --git a/vue/src/component/ContextMenu/index.vue b/vue/src/component/ContextMenu/index.vue
index a3881d0..955346e 100644
--- a/vue/src/component/ContextMenu/index.vue
+++ b/vue/src/component/ContextMenu/index.vue
@@ -75,7 +75,7 @@ export default {
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: #fff;
+    color: #ffffff;
     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
 
     &-item {
diff --git a/vue/src/component/OrgTree/tree.scss b/vue/src/component/OrgTree/tree.scss
index 02f8be2..e67ad17 100644
--- a/vue/src/component/OrgTree/tree.scss
+++ b/vue/src/component/OrgTree/tree.scss
@@ -50,7 +50,7 @@
         z-index: 10;
         margin-left: -10px;
         margin-top: 10px;
-        background-color: #fff;
+        background-color: #ffffff;
         border: 1px solid #ccc;
         border-radius: 50%;
         box-shadow: 0 0 2px rgba(0, 0, 0, .15);
diff --git a/vue/src/component/RegionSelector/Tab/style.scss b/vue/src/component/RegionSelector/Tab/style.scss
index 71fab23..1c8538e 100644
--- a/vue/src/component/RegionSelector/Tab/style.scss
+++ b/vue/src/component/RegionSelector/Tab/style.scss
@@ -1,6 +1,6 @@
 .rg-header, .rg-search {
     padding: 2px 10px 0;
-    background-color: white;
+    background-color: #ffffff;
 }
 
 .rg-header {
@@ -27,7 +27,7 @@
         }
 
         &:hover {
-            color: black;
+            color: #000000;
         }
 
         &.rg-removeall-button {
@@ -42,7 +42,7 @@
 
 .rg-level-tabs {
     margin-top: 10px;
-    background-color: #fff;
+    background-color: #ffffff;
 
     ul {
         padding: 0;
@@ -67,7 +67,7 @@
             &.active {
                 a {
                     color: #333;
-                    background-color: #fff;
+                    background-color: #ffffff;
                     font-weight: 600;
                 }
 
@@ -96,7 +96,7 @@
             overflow: hidden;
             padding: 3px 10px;
             font-size: 14px;
-            color: black;
+            color: #000000;
             cursor: pointer;
 
             &.rg-item {
@@ -104,13 +104,13 @@
                 color: #777;
 
                 &:hover {
-                    color: black;
+                    color: #000000;
                     background-color: #F5F5F5;
                 }
 
                 &.active {
                     background-color: #E4EAEE;
-                    color: black;
+                    color: #000000;
                 }
             }
 
diff --git a/vue/src/component/UploadFile/style.scss b/vue/src/component/UploadFile/style.scss
index 4286973..d14fc61 100644
--- a/vue/src/component/UploadFile/style.scss
+++ b/vue/src/component/UploadFile/style.scss
@@ -20,7 +20,7 @@
         top: 0;
         height: 100%;
         width: 100%;
-        background-color: #fff;
+        background-color: #ffffff;
         opacity: 0.9;
 
         .el-progress__text {
diff --git a/vue/src/globalMethod/SignautreBoard/main.vue b/vue/src/globalMethod/SignautreBoard/main.vue
index e517d95..ec35ce3 100644
--- a/vue/src/globalMethod/SignautreBoard/main.vue
+++ b/vue/src/globalMethod/SignautreBoard/main.vue
@@ -144,7 +144,7 @@ export default {
 <style lang="scss">
 .signature-board {
     position: fixed;
-    background-color: white;
+    background-color: #ffffff;
     top: 0;
     right: 0;
     height: 100vh;
diff --git a/vue/src/globalMethod/Verify/style.scss b/vue/src/globalMethod/Verify/style.scss
index f958c16..5c50263 100644
--- a/vue/src/globalMethod/Verify/style.scss
+++ b/vue/src/globalMethod/Verify/style.scss
@@ -124,7 +124,7 @@
         margin: 5.39% 3.24%;
         width: 93.52%;
         padding: 0 0 13.67% 0;
-        background-color: white;
+        background-color: #ffffff;
         background-image: url(./image/track.png);
 
         .slider-track {
diff --git a/vue/src/layout/component/Navbar/component/RootMenu.vue b/vue/src/layout/component/Navbar/component/RootMenu.vue
index 7a97206..1dd3428 100644
--- a/vue/src/layout/component/Navbar/component/RootMenu.vue
+++ b/vue/src/layout/component/Navbar/component/RootMenu.vue
@@ -238,7 +238,7 @@ export default {
         > .menu-popover {
             position: absolute;
             left: -20px;
-            background-color: #fff;
+            background-color: #ffffff;
             margin: 5px 0;
             padding: 5px 0;
             min-width: 100px;
diff --git a/vue/src/layout/component/Navbar/style.scss b/vue/src/layout/component/Navbar/style.scss
index 5b6fc0f..56b0a6f 100644
--- a/vue/src/layout/component/Navbar/style.scss
+++ b/vue/src/layout/component/Navbar/style.scss
@@ -10,7 +10,7 @@
     transition: height .3s ease-in-out;
     position: relative;
     z-index: 9;
-    background-color: #fff;
+    background-color: #ffffff;
     box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
     > div {
diff --git a/vue/src/layout/component/Sidebar/style.scss b/vue/src/layout/component/Sidebar/style.scss
index 45e56d2..4367ea2 100644
--- a/vue/src/layout/component/Sidebar/style.scss
+++ b/vue/src/layout/component/Sidebar/style.scss
@@ -56,7 +56,7 @@ $iconSize: 16px;
             .sidebar-title {
                 display: inline-block;
                 margin: 0;
-                color: #fff;
+                color: #ffffff;
                 font-weight: 600;
                 line-height: $nav-height;
                 font-size: 14px;
diff --git a/vue/src/view/app/login/style.scss b/vue/src/view/app/login/style.scss
index 3baaf0d..8c92f0c 100644
--- a/vue/src/view/app/login/style.scss
+++ b/vue/src/view/app/login/style.scss
@@ -43,7 +43,7 @@ $cursor: #fff;
             position: relative;
 
             .set-animation {
-                color: #fff;
+                color: #ffffff;
                 position: absolute;
                 top: 115px;
                 font-size: 18px;
@@ -103,7 +103,7 @@ $cursor: #fff;
         }
 
         .other-ways {
-            color: #fff;
+            color: #ffffff;
             font-size: 14px;
 
             svg {
diff --git a/vue/src/view/example/test/develop/component/ImageCompressTest.vue b/vue/src/view/example/test/develop/component/ImageCompressTest.vue
index fbf2d1b..d634c73 100644
--- a/vue/src/view/example/test/develop/component/ImageCompressTest.vue
+++ b/vue/src/view/example/test/develop/component/ImageCompressTest.vue
@@ -204,7 +204,7 @@ export default {
 
         img {
             padding: .25rem;
-            background-color: #fff;
+            background-color: #ffffff;
             border: 1px solid #dee2e6;
             border-radius: .25rem;
             max-width: 100%;
diff --git a/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue b/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue
index 7c41560..34881c7 100644
--- a/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue
+++ b/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue
@@ -45,7 +45,7 @@ export default {
     border-color: rgba(0, 0, 0, .05);
 
     &:hover .card-panel-icon-wrapper {
-        color: #fff;
+        color: #ffffff;
     }
 
     .card-panel-icon-wrapper {
diff --git a/vue/src/view/userCenter/component/UserCard.vue b/vue/src/view/userCenter/component/UserCard.vue
index 2903141..5e50e6c 100644
--- a/vue/src/view/userCenter/component/UserCard.vue
+++ b/vue/src/view/userCenter/component/UserCard.vue
@@ -53,6 +53,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~@/asset/style/variables.scss";
+
 .user-card {
     .avatar-container {
         position: relative;
@@ -79,7 +81,7 @@ export default {
         list-style: none;
 
         li {
-            border-bottom: 1px solid #F0F3F4;
+            border-bottom: 1px solid #EBEEF5;
             padding: 11px 0;
             font-size: 13px;
         }
@@ -88,7 +90,7 @@ export default {
             float: right;
 
             a {
-                color: #317EF3;
+                color: $--color-primary;
             }
         }
     }