diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 1cf28f4734..c4d3a904bc 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -2,12 +2,7 @@
   position: relative;
   display: flex;
   display: inline-block;
-  /* #ifdef harmony dynamic*/
-  width: 80px;
-  /* #endif */
-  /* #ifndef harmony dynamic*/
   width: auto;
-  /* #endif */
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -15,19 +10,30 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  height: $button-default-height;
-  font-size: $button-default-font-size;
-  font-weight: $font-weight;
   text-align: center;
   cursor: pointer;
-  transition: $button-transition;
   user-select: none;
   touch-action: manipulation;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* #ifndef harmony dynamic*/
+  height: $button-default-height;
+  font-size: $button-default-font-size;
+  font-weight: $font-weight;
+  transition: $button-transition;
   color: $button-default-color;
   background: $button-default-background-color;
   border-width: $button-border-width;
+  /* #endif */
+  /* #ifdef harmony dynamic*/
+  height: 62px;
+  font-size: 28px;
+  font-weight: 400;
+  transition: opacity 0.2s;
+  color: #1a1a1a;
+  background: transparent;
+  border-width: 0.5px;
+  /* #endif */
 
   &-text {
     margin-left: $button-text-icon-margin;
@@ -67,12 +73,12 @@
 
   &-wrap {
     height: 100%;
-    width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     /* #ifndef harmony dynamic*/
+    width: 100%;
     background: initial;
     /* #endif */
     .nut-icon {
diff --git a/src/packages/dialog/content.tsx b/src/packages/dialog/content.tsx
index 8944de22ff..b47b5cfafa 100644
--- a/src/packages/dialog/content.tsx
+++ b/src/packages/dialog/content.tsx
@@ -59,7 +59,6 @@ export const Content: FunctionComponent<
       style={style}
       onClick={handleClick}
     >
-      {close}
       {header}
       <div
         className={classPrefix}
@@ -68,6 +67,7 @@ export const Content: FunctionComponent<
         {renderHeader()}
         <div className={`${classPrefix}-content`}>{children}</div>
         {renderFooter()}
+        {close}
       </div>
     </div>
   )
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index 4f199ff480..c83dfc55c4 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -6,19 +6,28 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: $dialog-width;
-  min-width: $dialog-min-width;
+  box-sizing: border-box;
+
   /* #ifndef harmony dynamic*/
-  max-height: 67%;
-  /* #endif */
+  max-height: 80%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
-  box-sizing: border-box;
+  width: $dialog-width;
+  min-width: $dialog-min-width;
+  /* #endif */
 
+  /* #ifdef harmony dynamic*/
+  background-color: #ffffff;
+  width: 80%;
+  border-radius: 24px;
+  min-width: 240px;
+  min-height: 248px;
+  padding: 48px;
+  box-sizing: border-box;
+  position: relative;
+  /* #endif */
   &-outer {
     position: fixed;
-    max-height: 100%;
-    background-color: $white;
     transition:
       transform 0.2s,
       -webkit-transform 0.2s;
@@ -27,8 +36,21 @@
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
-    border-radius: $dialog-border-radius;
     animation-duration: 0.3s;
+    /* #ifndef harmony dynamic*/
+    max-height: 100%;
+    background-color: $white;
+    border-radius: $dialog-border-radius;
+    /* #endif */
+    /* #ifdef harmony dynamic*/
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 48px;
+    /* #endif */
   }
 
   &-close {
@@ -58,11 +80,20 @@
     }
 
     &-bottom {
-      bottom: -64px;
-      width: $dialog-bottom-close-icon-size;
-      height: $dialog-bottom-close-icon-size;
       left: 50%;
       transform: translateX(-50%);
+      /* #ifndef harmony dynamic*/
+      width: $dialog-bottom-close-icon-size;
+      height: $dialog-bottom-close-icon-size;
+      position: absolute;
+      top: calc(100% + 30px);
+      /* #endif */
+      /* #ifdef harmony dynamic*/
+      width: var(--nutui-dialog-bottom-close-icon-size, 48px);
+      height: var(--nutui-dialog-bottom-close-icon-size, 48px);
+
+      bottom: -150px;
+      /* #endif */
       .nut-icon {
         color: $color-text-disabled;
         background-color: $color-mask-part;