update $Modal style

examples/routers/modal.vue

@@ -1,47 +1,43 @@
 <template>
     <div>
-        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
+        <Button @click="instance('info')">Info</Button>
-        <Button type="primary" @click="modal2 = true">Display dialog box</Button>
+        <Button @click="instance('success')">Success</Button>
-        <Button @click="hc">Click Me</Button>
+        <Button @click="instance('warning')">Warning</Button>
-        <Modal
+        <Button @click="instance('error')">Error</Button>
-                v-model="modal1"
-                title="Common Modal dialog box title"
-                dragable
-                @on-ok="ok"
-                @on-cancel="cancel">
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-        </Modal>
-        <Modal
-                v-model="modal2"
-                title="Common Modal dialog box title2"
-                dragable
-                @on-ok="ok"
-                @on-cancel="cancel">
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-        </Modal>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                modal1: false,
-                modal2: false
-            }
-        },
         methods: {
-            ok () {
+            instance (type) {
-                this.$Message.info('Clicked ok');
+                const title = '对话框的标题';
-            },
+                const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
-            cancel () {
+                switch (type) {
-                this.$Message.info('Clicked cancel');
+                    case 'info':
-            },
+                        this.$Modal.info({
-            hc () {
+                            title: title,
-                this.$Message.info('Hello');
+                            content: content
+                        });
+                        break;
+                    case 'success':
+                        this.$Modal.success({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                    case 'warning':
+                        this.$Modal.warning({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                    case 'error':
+                        this.$Modal.error({
+                            title: title,
+                            content: content
+                        });
+                        break;
+                }
             }
         }
     }

src/components/modal/confirm.js

@@ -63,13 +63,6 @@ Modal.newInstance = properties => {
                         class: `${prefixCls}-body`
                     }
                 }, [
-                    h('div', {
-                        class: this.iconTypeCls
-                    }, [
-                        h('i', {
-                            class: this.iconNameCls
-                        })
-                    ]),
                     h('div', {
                         domProps: {
                             innerHTML: this.body
@@ -103,6 +96,13 @@ Modal.newInstance = properties => {
                             class: `${prefixCls}-head`
                         }
                     }, [
+                        h('div', {
+                            class: this.iconTypeCls
+                        }, [
+                            h('i', {
+                                class: this.iconNameCls
+                            })
+                        ]),
                         h('div', {
                             attrs: {
                                 class: `${prefixCls}-head-title`
@@ -124,8 +124,8 @@ Modal.newInstance = properties => {
         computed: {
             iconTypeCls () {
                 return [
-                    `${prefixCls}-body-icon`,
+                    `${prefixCls}-head-icon`,
-                    `${prefixCls}-body-icon-${this.iconType}`
+                    `${prefixCls}-head-icon-${this.iconType}`
                 ];
             },
             iconNameCls () {

src/styles/components/modal.less

@@ -138,33 +138,13 @@
 .@{confirm-prefix-cls} {
     padding: 0 4px;
     &-head {
-
+        padding: 0 12px 0 0;
-        &-title {
-            display: inline-block;
-            font-size: @font-size-base;
-            color: @title-color;
-            font-weight: 700;
-        }
-    }
-
-    &-body{
-        margin-top: 6px;
-        padding-left: 48px;
-        padding-top: 18px;
-        font-size: @font-size-small;
-        color: @text-color;
-        position: relative;
-
-        &-render{
-            margin: 0;
-            padding: 0;
-        }
-
         &-icon {
-            font-size: 36px;
+            display: inline-block;
-            position: absolute;
+            font-size: 28px;
-            top: 0;
+            vertical-align: middle;
-            left: 0;
+            position: relative;
+            top: 3px;
 
             &-info {
                 color: @primary-color;
@@ -182,10 +162,31 @@
                 color: @warning-color;
             }
         }
+
+        &-title {
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 12px;
+            font-size: @font-size-large;
+            color: @title-color;
+            font-weight: 700;
+        }
+    }
+
+    &-body{
+        padding-left: 42px;
+        font-size: @font-size-base;
+        color: @text-color;
+        position: relative;
+
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
     }
 
     &-footer{
-        margin-top: 40px;
+        margin-top: 20px;
         text-align: right;
 
         button + button {