Merge branch 'feature/vue' of http://git.yoho.cn/fe/yohoblk-wap into feature/vue

陈峰
Commit bb6d99b14314881cf543d205397bbd4771a54dd7 2 parents 7ac19989 9b48a2c8
Showing 15 changed files with 488 additions and 93 deletions
public/font/iconfont.eot
public/font/iconfont.svg
public/font/iconfont.ttf
public/font/iconfont.woff
public/scss/common/_icon.css
src/components/message/base.js
src/components/message/index.js
src/components/message/notice.vue
src/components/message/notification.vue
src/entry-client.js
src/statics/font/iconfont.eot
src/statics/font/iconfont.svg
src/statics/font/iconfont.ttf
src/statics/font/iconfont.woff
src/statics/scss/icon.scss
--- a/public/font/iconfont.eot
View file @bb6d99b
+++ b/public/font/iconfont.eot
View file @bb6d99b
--- a/public/font/iconfont.svg
View file @bb6d99b
+++ b/public/font/iconfont.svg
View file @bb6d99b
@@ -95,4 +95,8 @@
 <glyph unicode="&#xe947;" glyph-name="add" d="M1024 550.4h-409.6v409.6h-204.8v-409.6h-409.6v-204.8h409.6v-409.6h204.8v409.6h409.6z" />
 <glyph unicode="&#xe948;" glyph-name="order" horiz-adv-x="862" d="M797.653 896v-896h-733.653v896h733.653zM818.987 960h-776.32c-23.467 0-42.667-19.2-42.667-42.667v-938.667c0-23.467 19.2-42.667 42.667-42.667h776.32c23.467 0 42.667 19.2 42.667 42.667v938.667c0 23.467-19.2 42.667-42.667 42.667v0zM153.493 704h554.667v-64h-554.667v64zM153.493 490.667h554.667v-64h-554.667v64zM153.493 256h379.563v-64h-379.563v64z" />
 <glyph unicode="&#xe949;" glyph-name="store" horiz-adv-x="1147" d="M204.857 365.468c-40.784 0-74.193 7.583-99.262 22.568-64.342 34.425-105.595 104.448-105.595 181.586 0 15.454 2.606 34.243 7.714 55.951 0.313 6.124 1.72 12.144 4.144 17.799l110.755 258.437c0.391 0.964 0.834 1.902 1.303 2.841 19.623 45.761 58.974 55.351 88.578 55.351h725.483c45.866 0 81.073-22.516 94.598-60.355l102.624-253.459c2.189-5.368 3.44-11.049 3.753-16.809 5.082-21.708 7.688-40.497 7.688-55.951 0-1.147-0.052-2.319-0.13-3.492-5.082-76.095-47.325-144.476-110.364-178.745-24.939-14.541-57.957-21.916-98.168-21.916-70.961 0-136.684 36.067-172.621 94.389-4.196 5.655-6.645 10.997-8.235 14.724-0.625 0.599-1.199 1.095-1.538 1.303-1.147-0.078-2.033-0.182-2.684-0.261-0.573-0.704-1.173-1.381-1.772-2.033-1.147-2.658-2.137-4.847-3.388-7.271-0.495-0.99-1.016-1.928-1.564-2.867-35.415-60.433-102.416-97.985-174.784-97.985-70.961 0-136.737 36.093-172.647 94.467-2.007 2.71-3.596 5.316-4.847 7.61-0.573 0.547-1.147 1.147-1.694 1.72-1.981 0.651-5.16 0.912-7.531 0.651-0.208-0.235-0.417-0.469-0.625-0.678-1.121-3.31-2.606-6.541-4.378-9.59-35.442-60.433-102.416-97.985-174.81-97.985zM111.172 610.484c-0.235-1.381-0.521-2.762-0.86-4.144-5.499-21.812-6.072-32.94-6.072-36.718 0-38.048 20.666-73.75 52.693-90.897 5.186-3.023 17.564-9.017 47.924-9.017 33.8 0 63.769 15.219 81.437 41.018 4.743 13.421 13.134 24.418 19.91 31.715 16.287 20.926 42.895 33.748 73.88 35.389 32.575 1.928 63.143-8.913 83.705-28.77 12.092-9.095 18.033-20.092 20.952-26.19 0.651-0.964 1.251-1.928 1.85-2.919 17.043-29.083 48.758-46.439 84.851-46.439 35.311 0 66.479 16.626 83.757 44.615l0.599 1.381c3.231 7.557 7.427 16.34 16.835 26.581 18.138 23.662 48.393 37.631 82.063 37.631 44.458 0 68.512-23.975 78.779-34.217 10.58-10.502 15.714-21.239 18.372-27.493 0.443-0.678 0.86-1.355 1.277-2.059 17.043-29.083 48.758-46.439 84.851-46.439 30.36 0 42.738 5.968 45.813 7.818 0.678 0.417 1.381 0.808 2.085 1.199 31.689 16.991 53.214 52.276 56.498 92.435-0.182 4.847-1.173 15.792-6.020 35.181-0.417 1.616-0.73 3.231-0.99 4.873l-97.49 240.742h-721.6l-105.1-245.276zM759.908 475.65c0.026-0.026 0.052-0.052 0.078-0.052-0.026 0.026-0.052 0.052-0.078 0.052zM386.808 489.8c0-0.026 0-0.052 0-0.078 0 0.026 0 0.052 0 0.078zM478.383 530.506c0.026 0 0.052-0.026 0.052-0.052 0 0.026-0.026 0.052-0.052 0.052zM844.968 530.506c0.026 0 0.026-0.026 0.052-0.052-0.026 0.026-0.026 0.052-0.052 0.052zM989.001-64h-814.374c-28.77 0-52.12 23.35-52.12 52.12v429.468c0 28.77 23.35 52.12 52.12 52.12s52.12-23.35 52.12-52.12v-377.348h710.134v381.153c0 28.77 23.35 52.12 52.12 52.12s52.12-23.35 52.12-52.12v-433.273c0-28.796-23.324-52.12-52.12-52.12z" />
+<glyph unicode="&#xf35b;" glyph-name="default-tip" horiz-adv-x="832" d="M416 864c228 0 416-188 416-416s-188-416-416-416-416 188-416 416 188 416 416 416zM464 240v80h-96v-80h96zM464 416v256h-96v-256h96z" />
+<glyph unicode="&#xf36e;" glyph-name="error-tip" horiz-adv-x="832" d="M416 864c230 0 416-186 416-416s-186-416-416-416-416 186-416 416 186 416 416 416zM624 298l-150 150 150 150-58 58-150-150-150 150-58-58 150-150-150-150 58-58 150 150 150-150z" />
+<glyph unicode="&#xf3ff;" glyph-name="success-tip" horiz-adv-x="832" d="M416 864c230 0 416-186 416-416s-186-416-416-416-416 186-416 416 186 416 416 416zM352 300l268 270-36 36-250-252-94 94-36-36 112-112c4-4 12-8 18-8s14 4 18 8z" />
+<glyph unicode="&#xf404;" glyph-name="close-tip" horiz-adv-x="384" d="M360 640l24-24-168-168 168-168-24-24-168 168-168-168-24 24 168 168-168 168 24 24 168-168z" />
 </font></defs></svg>
--- a/public/font/iconfont.ttf
View file @bb6d99b
+++ b/public/font/iconfont.ttf
View file @bb6d99b
--- a/public/font/iconfont.woff
View file @bb6d99b
+++ b/public/font/iconfont.woff
View file @bb6d99b
--- a/public/scss/common/_icon.css
View file @bb6d99b
+++ b/public/scss/common/_icon.css
View file @bb6d99b
@@ -209,6 +209,9 @@
 .icon-noselect:before {
     content: "\e928";
 }
+.icon-del:before {
+    content: "\e929";
+}
 .icon-message:before {
     content: "\e92a";
 }
@@ -299,12 +302,21 @@
 .icon-add:before {
     content: "\e947";
 }
-.icon-del:before {
-    content: "\e929";
-}
 .icon-order:before {
     content: "\e948";
 }
 .icon-store:before {
     content: "\e949";
 }
+.icon-default-tip:before {
+    content: "\f35b";
+}
+.icon-error-tip:before {
+    content: "\f36e";
+}
+.icon-success-tip:before {
+    content: "\f3ff";
+}
+.icon-close-tip:before {
+    content: "\f404";
+}
--- a/src/components/message/base.js 0 → 100644
View file @bb6d99b
+++ b/src/components/message/base.js 0 → 100644
View file @bb6d99b
+import Notification from './notification.vue';
+import Vue from 'vue';
+
+Notification.newInstance = properties => {
+    const _props = properties || {};
+
+    const Instance = new Vue({
+        data: _props,
+        render (h) {
+            return h(Notification, {
+                props: _props
+            });
+        }
+    });
+
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const notification = Instance.$children[0];
+
+    return {
+        notice (noticeProps) {
+            notification.add(noticeProps);
+        },
+        remove (name) {
+            notification.close(name);
+        },
+        component: notification,
+        destroy (element) {
+            notification.closeAll();
+            setTimeout(function() {
+                document.body.removeChild(document.getElementsByClassName(element)[0]);
+            }, 500);
+        }
+    };
+};
+
+export default Notification;
--- a/src/components/message/index.js 0 → 100644
View file @bb6d99b
+++ b/src/components/message/index.js 0 → 100644
View file @bb6d99b
+import Notification from './base';
+
+const prefixCls = 'blk-message';
+const iconPrefixCls = 'icon';
+const prefixKey = 'blk_message_key_';
+
+let defaultDuration = 1.5;
+let top;
+let messageInstance;
+let name = 1;
+
+const iconTypes = {
+    'info': 'default-tip',
+    'success': 'success-tip',
+    'warning': 'default-tip',
+    'error': 'error-tip',
+    'loading': 'load-c'
+};
+
+function getMessageInstance () {
+    messageInstance = messageInstance || Notification.newInstance({
+        prefixCls: prefixCls,
+        styles: {
+            top: `${top}px`
+        }
+    });
+
+    return messageInstance;
+}
+
+function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
+    const iconType = iconTypes[type];
+
+    // if loading
+    const loadCls = type === 'loading' ? ' blk-load-loop' : '';
+
+    let instance = getMessageInstance();
+
+    instance.notice({
+        name: `${prefixKey}${name}`,
+        duration: duration,
+        styles: {},
+        transitionName: 'move-up',
+        content: `
+            <div class="${prefixCls}-custom-content ${prefixCls}-${type}">
+                <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}${loadCls}"></i>
+                <span>${content}</span>
+            </div>
+        `,
+        onClose: onClose,
+        closable: closable,
+        type: 'message'
+    });
+
+    // 用于手动消除
+    return (function () {
+        let target = name++;
+
+        return function () {
+            instance.remove(`${prefixKey}${target}`);
+        };
+    })();
+}
+
+export default {
+    name: 'Message',
+    info (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'info', options.onClose, options.closable);
+    },
+    success (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'success', options.onClose, options.closable);
+    },
+    warning (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'warning', options.onClose, options.closable);
+    },
+    error (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'error', options.onClose, options.closable);
+    },
+    loading (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
+    },
+    config (options) {
+        if (options.top) {
+            top = options.top;
+        }
+        if (options.duration) {
+            defaultDuration = options.duration;
+        }
+    },
+    destroy () {
+        let instance = getMessageInstance();
+        messageInstance = null;
+        instance.destroy('blk-message');
+    }
+};
--- a/src/components/message/notice.vue 0 → 100644
View file @bb6d99b
+++ b/src/components/message/notice.vue 0 → 100644
View file @bb6d99b
+<template>
+    <transition :name="transitionName" @enter="handleEnter" @leave="handleLeave">
+        <div :class="classes" :style="styles">
+            <template>
+                <div :class="[baseClass + '-content']" ref="content">
+                    <div :class="[baseClass + '-content-text']" v-html="content"></div>
+                    <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+                        <i class="icon icon-close-tip"></i>
+                    </a>
+                </div>
+            </template>
+        </div>
+    </transition>
+</template>
+<script>
+    export default {
+        props: {
+            prefixCls: {
+                type: String,
+                default: ''
+            },
+            duration: {
+                type: Number,
+                default: 1.5
+            },
+            type: {
+                type: String
+            },
+            content: {
+                type: String,
+                default: ''
+            },
+            styles: {
+                type: Object,
+                default: function() {
+                    return {
+                        right: '50%'
+                    };
+                }
+            },
+            closable: {
+                type: Boolean,
+                default: false
+            },
+            className: {
+                type: String
+            },
+            name: {
+                type: String,
+                required: true
+            },
+            onClose: {
+                type: Function
+            },
+            transitionName: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                withDesc: false
+            };
+        },
+        computed: {
+            baseClass () {
+                return `${this.prefixCls}-notice`;
+            },
+            classes () {
+                return [
+                    this.baseClass,
+                    {
+                        [`${this.className}`]: !!this.className,
+                        [`${this.baseClass}-closable`]: this.closable,
+                        [`${this.baseClass}-with-desc`]: this.withDesc
+                    }
+                ];
+            },
+            contentClasses () {
+                return `${this.baseClass}-content`;
+            }
+        },
+        methods: {
+            clearCloseTimer () {
+                if (this.closeTimer) {
+                    clearTimeout(this.closeTimer);
+                    this.closeTimer = null;
+                }
+            },
+            close () {
+                this.clearCloseTimer();
+                this.onClose();
+                this.$parent.close(this.name);
+            },
+            handleEnter (el) {
+                if (this.type === 'message') {
+                    el.style.height = el.scrollHeight + 'px';
+                }
+            },
+            handleLeave (el) {
+                if (this.type === 'message') {
+                    if (document.getElementsByClassName('blk-message-notice').length !== 1) {
+                        el.style.height = 0;
+                        el.style.paddingTop = 0;
+                        el.style.paddingBottom = 0;
+                    }
+                }
+            }
+        },
+        mounted () {
+            this.clearCloseTimer();
+
+            if (this.duration !== 0) {
+                this.closeTimer = setTimeout(() => {
+                    this.close();
+                }, this.duration * 1000);
+            }
+
+            if (this.prefixCls === 'blk-notice') {
+                this.withDesc = this.$refs.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
+            }
+        },
+        beforeDestroy () {
+            this.clearCloseTimer();
+        }
+    };
+</script>
+<style lang="scss">
+    .blk-message {
+        font-size: 24px;
+        position: fixed;
+        z-index: 1010;
+        width: 100%;
+        top: 50px;
+        left: 0;
+        pointer-events: none;
+
+        &-notice {
+            padding: 8px;
+            text-align: center;
+            transition: height .3s ease-in-out, padding .3s ease-in-out;
+
+            &:first-child {
+                 margin-top: -8px;
+            }
+
+            .icon-default-tip {
+                color: #2db7f5;
+            }
+
+            .icon-error-tip {
+                color: #ed3f14;
+            }
+
+            .icon-success-tip {
+                color: #19be6b;
+            }
+        }
+
+        &-notice-content {
+            display: inline-block;
+            pointer-events: all;
+            padding: 8px 16px;
+            border-radius: 4px;
+            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+            background: #fff;
+            position: relative;
+            &-text{
+                 display: inline-block;
+            }
+        }
+
+        &-notice-closable{
+            .blk-message-notice-content-text{
+                padding-right: 32px;
+            }
+        }
+
+        .icon {
+            margin-right: 8px;
+            font-size: 26px;
+            top: 1px;
+            position: relative;
+
+            &.icon-close-tip {
+                font-size: 30px;
+            }
+        }
+    }
+</style>
--- a/src/components/message/notification.vue 0 → 100644
View file @bb6d99b
+++ b/src/components/message/notification.vue 0 → 100644
View file @bb6d99b
+<template>
+    <div :class="classes" :style="styles">
+        <Notice
+            v-for="notice in notices"
+            :key="notice.name"
+            :prefix-cls="prefixCls"
+            :styles="notice.styles"
+            :type="notice.type"
+            :content="notice.content"
+            :duration="notice.duration"
+            :closable="notice.closable"
+            :name="notice.name"
+            :transition-name="notice.transitionName"
+            :on-close="notice.onClose">
+        </Notice>
+    </div>
+</template>
+<script>
+    import Notice from './notice.vue';
+
+    const prefixCls = 'blk-notification';
+    let seed = 0;
+    const now = Date.now();
+
+    function getUuid () {
+        return 'blkNotification_' + now + '_' + (seed++);
+    }
+
+    export default {
+        components: { Notice },
+        props: {
+            prefixCls: {
+                type: String,
+                default: prefixCls
+            },
+            styles: {
+                type: Object,
+                default: function () {
+                    return {
+                        top: '65px',
+                        left: '50%'
+                    };
+                }
+            },
+            content: {
+                type: String
+            },
+            className: {
+                type: String
+            }
+        },
+        data () {
+            return {
+                notices: []
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${this.prefixCls}`,
+                    {
+                        [`${this.className}`]: !!this.className
+                    }
+                ];
+            }
+        },
+        methods: {
+            add (notice) {
+                const name = notice.name || getUuid();
+
+                let _notice = Object.assign({
+                    styles: {
+                        right: '50%'
+                    },
+                    content: '',
+                    duration: 1.5,
+                    closable: false,
+                    name: name
+                }, notice);
+
+                this.notices.push(_notice);
+            },
+            close (name) {
+                const notices = this.notices;
+                for (let i = 0; i < notices.length; i++) {
+                    if (notices[i].name === name) {
+                        this.notices.splice(i, 1);
+                        break;
+                    }
+                }
+            },
+            closeAll () {
+                this.notices = [];
+            }
+        }
+    };
+</script>
--- a/src/entry-client.js
View file @bb6d99b
+++ b/src/entry-client.js
View file @bb6d99b
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import FastClick from 'fastclick';
 import {createApp} from './app';
 import yoho from '../public/js/yoho';
+import message from '../src/components/message';
 FastClick.attach(document.body);
@@ -15,6 +16,7 @@ if (window.__INITIAL_STATE__) {
     store.replaceState(window.__INITIAL_STATE__);
 }
 Vue.prop('yoho', yoho);
+Vue.prop('message', message);
 router.onReady(() => {
     router.beforeResolve((to, from, next) => {
--- a/src/statics/font/iconfont.eot
View file @bb6d99b
+++ b/src/statics/font/iconfont.eot
View file @bb6d99b
--- a/src/statics/font/iconfont.svg
View file @bb6d99b
+++ b/src/statics/font/iconfont.svg
View file @bb6d99b
@@ -95,4 +95,8 @@
 <glyph unicode="&#xe947;" glyph-name="add" d="M1024 550.4h-409.6v409.6h-204.8v-409.6h-409.6v-204.8h409.6v-409.6h204.8v409.6h409.6z" />
 <glyph unicode="&#xe948;" glyph-name="order" horiz-adv-x="862" d="M797.653 896v-896h-733.653v896h733.653zM818.987 960h-776.32c-23.467 0-42.667-19.2-42.667-42.667v-938.667c0-23.467 19.2-42.667 42.667-42.667h776.32c23.467 0 42.667 19.2 42.667 42.667v938.667c0 23.467-19.2 42.667-42.667 42.667v0zM153.493 704h554.667v-64h-554.667v64zM153.493 490.667h554.667v-64h-554.667v64zM153.493 256h379.563v-64h-379.563v64z" />
 <glyph unicode="&#xe949;" glyph-name="store" horiz-adv-x="1147" d="M204.857 365.468c-40.784 0-74.193 7.583-99.262 22.568-64.342 34.425-105.595 104.448-105.595 181.586 0 15.454 2.606 34.243 7.714 55.951 0.313 6.124 1.72 12.144 4.144 17.799l110.755 258.437c0.391 0.964 0.834 1.902 1.303 2.841 19.623 45.761 58.974 55.351 88.578 55.351h725.483c45.866 0 81.073-22.516 94.598-60.355l102.624-253.459c2.189-5.368 3.44-11.049 3.753-16.809 5.082-21.708 7.688-40.497 7.688-55.951 0-1.147-0.052-2.319-0.13-3.492-5.082-76.095-47.325-144.476-110.364-178.745-24.939-14.541-57.957-21.916-98.168-21.916-70.961 0-136.684 36.067-172.621 94.389-4.196 5.655-6.645 10.997-8.235 14.724-0.625 0.599-1.199 1.095-1.538 1.303-1.147-0.078-2.033-0.182-2.684-0.261-0.573-0.704-1.173-1.381-1.772-2.033-1.147-2.658-2.137-4.847-3.388-7.271-0.495-0.99-1.016-1.928-1.564-2.867-35.415-60.433-102.416-97.985-174.784-97.985-70.961 0-136.737 36.093-172.647 94.467-2.007 2.71-3.596 5.316-4.847 7.61-0.573 0.547-1.147 1.147-1.694 1.72-1.981 0.651-5.16 0.912-7.531 0.651-0.208-0.235-0.417-0.469-0.625-0.678-1.121-3.31-2.606-6.541-4.378-9.59-35.442-60.433-102.416-97.985-174.81-97.985zM111.172 610.484c-0.235-1.381-0.521-2.762-0.86-4.144-5.499-21.812-6.072-32.94-6.072-36.718 0-38.048 20.666-73.75 52.693-90.897 5.186-3.023 17.564-9.017 47.924-9.017 33.8 0 63.769 15.219 81.437 41.018 4.743 13.421 13.134 24.418 19.91 31.715 16.287 20.926 42.895 33.748 73.88 35.389 32.575 1.928 63.143-8.913 83.705-28.77 12.092-9.095 18.033-20.092 20.952-26.19 0.651-0.964 1.251-1.928 1.85-2.919 17.043-29.083 48.758-46.439 84.851-46.439 35.311 0 66.479 16.626 83.757 44.615l0.599 1.381c3.231 7.557 7.427 16.34 16.835 26.581 18.138 23.662 48.393 37.631 82.063 37.631 44.458 0 68.512-23.975 78.779-34.217 10.58-10.502 15.714-21.239 18.372-27.493 0.443-0.678 0.86-1.355 1.277-2.059 17.043-29.083 48.758-46.439 84.851-46.439 30.36 0 42.738 5.968 45.813 7.818 0.678 0.417 1.381 0.808 2.085 1.199 31.689 16.991 53.214 52.276 56.498 92.435-0.182 4.847-1.173 15.792-6.020 35.181-0.417 1.616-0.73 3.231-0.99 4.873l-97.49 240.742h-721.6l-105.1-245.276zM759.908 475.65c0.026-0.026 0.052-0.052 0.078-0.052-0.026 0.026-0.052 0.052-0.078 0.052zM386.808 489.8c0-0.026 0-0.052 0-0.078 0 0.026 0 0.052 0 0.078zM478.383 530.506c0.026 0 0.052-0.026 0.052-0.052 0 0.026-0.026 0.052-0.052 0.052zM844.968 530.506c0.026 0 0.026-0.026 0.052-0.052-0.026 0.026-0.026 0.052-0.052 0.052zM989.001-64h-814.374c-28.77 0-52.12 23.35-52.12 52.12v429.468c0 28.77 23.35 52.12 52.12 52.12s52.12-23.35 52.12-52.12v-377.348h710.134v381.153c0 28.77 23.35 52.12 52.12 52.12s52.12-23.35 52.12-52.12v-433.273c0-28.796-23.324-52.12-52.12-52.12z" />
+<glyph unicode="&#xf35b;" glyph-name="default-tip" horiz-adv-x="832" d="M416 864c228 0 416-188 416-416s-188-416-416-416-416 188-416 416 188 416 416 416zM464 240v80h-96v-80h96zM464 416v256h-96v-256h96z" />
+<glyph unicode="&#xf36e;" glyph-name="error-tip" horiz-adv-x="832" d="M416 864c230 0 416-186 416-416s-186-416-416-416-416 186-416 416 186 416 416 416zM624 298l-150 150 150 150-58 58-150-150-150 150-58-58 150-150-150-150 58-58 150 150 150-150z" />
+<glyph unicode="&#xf3ff;" glyph-name="success-tip" horiz-adv-x="832" d="M416 864c230 0 416-186 416-416s-186-416-416-416-416 186-416 416 186 416 416 416zM352 300l268 270-36 36-250-252-94 94-36-36 112-112c4-4 12-8 18-8s14 4 18 8z" />
+<glyph unicode="&#xf404;" glyph-name="close-tip" horiz-adv-x="384" d="M360 640l24-24-168-168 168-168-24-24-168 168-168-168-24 24 168 168-168 168 24 24 168-168z" />
 </font></defs></svg>
--- a/src/statics/font/iconfont.ttf
View file @bb6d99b
+++ b/src/statics/font/iconfont.ttf
View file @bb6d99b
--- a/src/statics/font/iconfont.woff
View file @bb6d99b
+++ b/src/statics/font/iconfont.woff
View file @bb6d99b
--- a/src/statics/scss/icon.scss
View file @bb6d99b
+++ b/src/statics/scss/icon.scss
View file @bb6d99b
@@ -25,351 +25,276 @@
 .icon-down:before {
     content: "\e602";
 }
-
 .icon-check:before {
     content: "\e603";
 }
-
 .icon-love:before {
     content: "\e604";
 }
-
 .icon-close:before {
     content: "\e605";
 }
-
 .icon-left:before {
     content: "\e606";
 }
-
 .icon-right:before {
     content: "\e607";
 }
-
 .icon-search:before {
     content: "\e608";
 }
-
 .icon-love-solid:before {
     content: "\e609";
 }
-
 .icon-focus:before {
     content: "\e60c";
 }
-
 .icon-focused:before {
     content: "\e60d";
 }
-
 .icon-share:before {
     content: "\e60e";
 }
-
 .icon-blk:before {
     content: "\e60f";
 }
-
 .icon-importedlayers:before {
     content: "\e610";
 }
-
 .icon-up:before {
     content: "\e617";
 }
-
 .icon-plus:before {
     content: "\e900";
 }
-
 .icon-back:before {
     content: "\e901";
 }
-
 .icon-choose:before {
     content: "\e902";
 }
-
 .icon-minus:before {
     content: "\e903";
 }
-
 .icon-brand:before {
     content: "\e904";
 }
-
 .icon-shopping-bag:before {
     content: "\e905";
 }
-
 .icon-time-o:before {
     content: "\e906";
 }
-
 .icon-see2:before {
     content: "\e907";
 }
-
 .icon-8:before {
     content: "\e908";
 }
-
 .icon-filter:before {
     content: "\e909";
 }
-
 .icon-share2:before {
     content: "\e90a";
 }
-
 .icon-liked:before {
     content: "\e90b";
 }
-
 .icon-like:before {
     content: "\e90c";
 }
-
 .icon-82:before {
     content: "\e90d";
 }
-
 .icon-0:before {
     content: "\e90e";
 }
-
 .icon-5:before {
     content: "\e90f";
 }
-
 .icon-kuaisu:before {
     content: "\e910";
 }
-
 .icon-niandu:before {
     content: "\e911";
 }
-
 .icon-vip:before {
     content: "\e912";
 }
-
 .icon-youhui:before {
     content: "\e913";
 }
-
 .icon-zazhi:before {
     content: "\e914";
 }
-
 .icon-refund-exchange:before {
     content: "\e915";
 }
-
 .icon-wait-cargo:before {
     content: "\e916";
 }
-
 .icon-wait-pay:before {
     content: "\e917";
 }
-
 .icon-send-cargo:before {
     content: "\e918";
 }
-
 .icon-msg:before {
     content: "\e919";
 }
-
 .icon-bold-shopbag:before {
     content: "\e91a";
 }
-
 .icon-notdef:before {
     content: "\e91b";
 }
-
 .icon-sort-asc:before {
     content: "\e91c";
 }
-
 .icon-sort-desc:before {
     content: "\e91d";
 }
-
 .icon-x:before {
     content: "\e91e";
 }
-
 .icon-edit-del:before {
     content: "\e91f";
 }
-
 .icon-close-round:before {
     content: "\e920";
 }
-
 .icon-help:before {
     content: "\e921";
 }
-
 .icon-read:before {
     content: "\e922";
 }
-
 .icon-back2:before {
     content: "\e923";
 }
-
 .icon-sort-up:before {
     content: "\e924";
 }
-
 .icon-sort-down:before {
     content: "\e925";
 }
-
 .icon-timeshare:before {
     content: "\e926";
 }
-
 .icon-more:before {
     content: "\e927";
 }
-
 .icon-noselect:before {
     content: "\e928";
 }
-
+.icon-del:before {
+    content: "\e929";
+}
 .icon-message:before {
     content: "\e92a";
 }
-
 .icon-delete:before {
     content: "\e92b";
 }
-
 .icon-nav:before {
     content: "\e92c";
 }
-
 .icon-setting:before {
     content: "\e92d";
 }
-
 .icon-search2:before {
     content: "\e92e";
 }
-
 .icon-email:before {
     content: "\e92f";
 }
-
 .icon-battery:before {
     content: "\e930";
 }
-
 .icon-key:before {
     content: "\e931";
 }
-
 .icon-note:before {
     content: "\e932";
 }
-
 .icon-question:before {
     content: "\e933";
 }
-
 .icon-time2:before {
     content: "\e934";
 }
-
 .icon-card:before {
     content: "\e935";
 }
-
 .icon-bag2:before {
     content: "\e936";
 }
-
 .icon-logistics:before {
     content: "\e937";
 }
-
 .icon-money:before {
     content: "\e938";
 }
-
 .icon-document:before {
     content: "\e939";
 }
-
 .icon-wifi:before {
     content: "\e93a";
 }
-
 .icon-email2:before {
     content: "\e93b";
 }
-
 .icon-focus2:before {
     content: "\e93c";
 }
-
 .icon-shopbag:before {
     content: "\e93d";
 }
-
 .icon-search3:before {
     content: "\e93e";
 }
-
 .icon-position:before {
     content: "\e93f";
 }
-
 .icon-onlineservice:before {
     content: "\e940";
 }
-
 .icon-seven:before {
     content: "\e941";
 }
-
 .icon-real:before {
     content: "\e942";
 }
-
 .icon-unsupport-seven:before {
     content: "\e943";
 }
-
 .icon-back-top1:before {
     content: "\e944";
 }
-
 .icon-see:before {
     content: "\e945";
 }
-
 .icon-reduce:before {
     content: "\e946";
 }
-
 .icon-add:before {
     content: "\e947";
 }
-
-.icon-del:before {
-    content: "\e929";
-}
-
 .icon-order:before {
     content: "\e948";
 }
-
 .icon-store:before {
     content: "\e949";
 }
+.icon-default-tip:before {
+    content: "\f35b";
+}
+.icon-error-tip:before {
+    content: "\f36e";
+}
+.icon-success-tip:before {
+    content: "\f3ff";
+}
+.icon-close-tip:before {
+    content: "\f404";
+}