From f4273043c248a64a75846d0f34d4f5e24ab21060 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Wed, 27 Jun 2018 09:40:31 +0800
Subject: [PATCH] update  $Modal style

---
 examples/routers/modal.vue       | 70 +++++++++++++++++++++++++++++++++-------------------------------------
 src/components/modal/confirm.js  | 18 +++++++++---------
 src/styles/components/modal.less | 55 ++++++++++++++++++++++++++++---------------------------
 3 files changed, 70 insertions(+), 73 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 57651e8..dbb0eab 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,47 +1,43 @@
 <template>
     <div>
-        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
-        <Button type="primary" @click="modal2 = true">Display dialog box</Button>
-        <Button @click="hc">Click Me</Button>
-        <Modal
-                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>
+        <Button @click="instance('info')">Info</Button>
+        <Button @click="instance('success')">Success</Button>
+        <Button @click="instance('warning')">Warning</Button>
+        <Button @click="instance('error')">Error</Button>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                modal1: false,
-                modal2: false
-            }
-        },
         methods: {
-            ok () {
-                this.$Message.info('Clicked ok');
-            },
-            cancel () {
-                this.$Message.info('Clicked cancel');
-            },
-            hc () {
-                this.$Message.info('Hello');
+            instance (type) {
+                const title = '对话框的标题';
+                const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
+                switch (type) {
+                    case 'info':
+                        this.$Modal.info({
+                            title: title,
+                            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;
+                }
             }
         }
     }
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index 37bc268..9900bc2 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -64,13 +64,6 @@ Modal.newInstance = properties => {
                     }
                 }, [
                     h('div', {
-                        class: this.iconTypeCls
-                    }, [
-                        h('i', {
-                            class: this.iconNameCls
-                        })
-                    ]),
-                    h('div', {
                         domProps: {
                             innerHTML: this.body
                         }
@@ -104,6 +97,13 @@ Modal.newInstance = properties => {
                         }
                     }, [
                         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}-body-icon-${this.iconType}`
+                    `${prefixCls}-head-icon`,
+                    `${prefixCls}-head-icon-${this.iconType}`
                 ];
             },
             iconNameCls () {
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index 925381b..49777cb 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -138,33 +138,13 @@
 .@{confirm-prefix-cls} {
     padding: 0 4px;
     &-head {
-
-        &-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;
-        }
-
+        padding: 0 12px 0 0;
         &-icon {
-            font-size: 36px;
-            position: absolute;
-            top: 0;
-            left: 0;
+            display: inline-block;
+            font-size: 28px;
+            vertical-align: middle;
+            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 {
--
libgit2 0.21.4