optimize Modal style

optimize Modal style

src/components/modal/modal.vue

@@ -8,7 +8,7 @@
                         <Icon type="ios-close-empty"></Icon>
                     </slot>
                 </a>
-                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
+                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
                 <div :class="[prefixCls + '-body']"><slot></slot></div>
                 <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                     <slot name="footer">
@@ -175,7 +175,7 @@
 
             let showHead = true;
 
-            if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
+            if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
                 showHead = false;
             }
 

src/styles/components/modal.less

@@ -46,7 +46,7 @@
     }
 
     &-close {
-        .content-close;
+        .content-close(1px, 31px);
     }
 
     &-body {
@@ -57,7 +57,7 @@
 
     &-footer {
         border-top: 1px solid @border-color-split;
-        padding: 10px 18px 10px 10px;
+        padding: 12px 18px 12px 10px;
         text-align: right;
         button + button {
             margin-left: 8px;

src/styles/mixins/close.less

@@ -1,5 +1,5 @@
-.close-base(@top: 0) {
-    font-size: 22px;
+.close-base(@top: 0, @icon-font-size: 22px) {
+    font-size: @icon-font-size;
     color: @legend-color;
     transition: color @transition-time ease;
     position: relative;

src/styles/mixins/content.less

@@ -2,15 +2,18 @@
 
 .content-header() {
     border-bottom: 1px solid @border-color-split;
-    padding: 10px 16px;
+    padding: 14px 16px;
     line-height: 1;
 
-    p {
+    p,
+    &-inner
+    {
         display: inline-block;
         width: 100%;
         height: 20px;
         line-height: 20px;
-        font-size: 14px;
+        font-size: @font-size-base;
+        color: @title-color;
         font-weight: bold;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -18,8 +21,8 @@
     }
 }
 
-.content-close(@top: 0) {
-    font-size: 12px;
+.content-close(@top: 0, @icon-font-size: 22px) {
+    font-size: @font-size-small;
     position: absolute;
     right: 16px;
     top: 8px;
@@ -27,6 +30,6 @@
     cursor: pointer;
 
     .@{icon-prefix-cls}-ios-close-empty {
-        .close-base(@top);
+        .close-base(@top, @icon-font-size);
     }
 }

test/routers/message.vue

@@ -6,9 +6,17 @@
     <i-button @click="success">成功</i-button>
     <i-button @click="warning">警告</i-button>
     <i-button @click="error">错误</i-button>
+    <i-button @click="modal1 = true"></i-button>
+    <Modal
+            :visible.sync="modal1"
+            title="普通的Modal对话框标题">
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+    </Modal>
 </template>
 <script>
-    import { Message, Button, Alert, Card, Notice, iButton } from 'iview';
+    import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
 
     export default {
         components: {
@@ -17,14 +25,15 @@
             Alert,
             Card,
             Notice,
-            iButton
+            iButton,
+            Modal
         },
         props: {
         
         },
         data () {
             return {
-            
+                modal1: true
             }
         },
         computed: {