messageBox样式修改

element-variables.scss

@@ -152,6 +152,8 @@ $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !de
 $--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
 /// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
+/// boxShadow|1|Shadow|1
+$--box-shadow-heavy: 0 2px 12px 0 rgba(0, 0, 0, 0.2) !default;
 
 /* Fill
 -------------------------- */
@@ -407,16 +409,17 @@ $--alert-icon-large-size: 28px !default;
 /// color||Color|0
 $--messagebox-title-color: $--color-text-primary !default;
 $--msgbox-width: 420px !default;
-$--msgbox-border-radius: 4px !default;
+$--msgbox-border-radius: 6px !default;
 /// fontSize||Font|1
 $--messagebox-font-size: $--font-size-large !default;
 /// fontSize||Font|1
 $--messagebox-content-font-size: $--font-size-base !default;
 /// color||Color|0
-$--messagebox-content-color: $--color-text-regular !default;
+$--messagebox-content-color: $--color-text-primary !default;
 /// fontSize||Font|1
 $--messagebox-error-font-size: 12px !default;
-$--msgbox-padding-primary: 15px !default;
+$--msgbox-padding-primary: 24px !default;
+$--msgbox-header-padding-primary: 16px !default;
 /// color||Color|0
 $--messagebox-success-color: $--color-success !default;
 /// color||Color|0
@@ -804,8 +807,8 @@ $--dialog-content-font-size: 14px !default;
 /// fontLineHeight||LineHeight|2
 $--dialog-font-line-height: $--font-line-height-primary !default;
 /// padding||Spacing|3
-$--dialog-padding-primary: 20px !default;
-
+$--dialog-padding-primary: 24px !default;
+$--dialog-header-padding-primary: 16px !default;
 /* Table
 -------------------------- */
 ///table||header|0
@@ -853,7 +856,7 @@ $--pagination-hover-color: $--color-primary !default;
 /// color||Color|0
 $--popup-modal-background-color: $--color-black !default;
 /// opacity||Other|1
-$--popup-modal-opacity: 0.5 !default;
+$--popup-modal-opacity: 0.4 !default;
 
 /* Popover
 -------------------------- */

node_module/element-theme-chalk/src/message-box.scss

@@ -7,13 +7,13 @@
 @include b(message-box) {
   display: inline-block;
   width: $--msgbox-width;
-  padding-bottom: 10px;
+  padding-bottom: 24px;
   vertical-align: middle;
   background-color: $--color-white;
   border-radius: $--msgbox-border-radius;
   border: 1px solid $--border-color-lighter;
   font-size: $--messagebox-font-size;
-  box-shadow: $--box-shadow-light;
+  box-shadow: $--box-shadow-heavy;
   text-align: left;
   overflow: hidden;
   backface-visibility: hidden;
@@ -37,22 +37,24 @@
 
   @include e(header) {
     position: relative;
-    padding: $--msgbox-padding-primary;
-    padding-bottom: 10px;
+    padding:$--msgbox-header-padding-primary;
+    padding-bottom: 8px;
+    padding-top: 8px;
   }
 
   @include e(title) {
     padding-left: 0;
     margin-bottom: 0;
     font-size: $--messagebox-font-size;
-    line-height: 1;
+    line-height: 36px;
+    height: 36px;
     color: $--messagebox-title-color;
   }
 
   @include e(headerbtn) {
     position: absolute;
-    top: $--msgbox-padding-primary;
-    right: $--msgbox-padding-primary;
+    top: $--msgbox-header-padding-primary;
+    right: 12px;
     padding: 0;
     border: none;
     outline: none;
@@ -61,7 +63,7 @@
     cursor: pointer;
 
     .el-message-box__close {
-      color: $--color-info;
+      color: $--color-default-text-plain;
     }
 
     &:focus, &:hover {
@@ -95,7 +97,7 @@
 
   @include e(status) {
     position: absolute;
-    top: 50%;
+    top: 20%;
     transform: translateY(-50%);
     font-size: 24px !important;
 
@@ -105,8 +107,8 @@
     }
 
     + .el-message-box__message {
-      padding-left: 36px;
-      padding-right: 12px;
+      padding-left: 32px;
+      padding-right: 8px;
     }
 
     &.el-icon-success {
@@ -146,8 +148,14 @@
     padding: 5px 15px 0;
     text-align: right;
 
+    & button:nth-child(1) {
+       color: $--color-text-secondary;
+       background-color: $--color-white;
+       border-color: $--color-text-placeholder;
+    }
+
     & button:nth-child(2) {
-      margin-left: 10px;
+      margin-left: 8px;
     }
   }