diff --git a/scss/_properties.scss b/scss/_properties.scss
index 7088a045a..c863bb17e 100644
--- a/scss/_properties.scss
+++ b/scss/_properties.scss
@@ -1100,7 +1100,7 @@
   --PickerColumns-title-lineHeight: 1.5;
   --PickerColumns-action-padding: 0 var(--gap-md);
   --PickerColumns-action-fontSize: var(--fontSizeLg);
-  --PickerColumns-confirmAction-color: #2468F2;
+  --PickerColumns-confirmAction-color: #2468f2;
   --PickerColumns-cancelAction-color: #666;
   --PickerColumns-option-fontSize: var(--fontSizeLg);
   --PickerColumns-optionText-color: var(--text-color);
@@ -1112,6 +1112,8 @@
   --PopOverAble-iconColor: inherit;
   --PopOverAble-onHover-iconColor: inherit;
 
+  --PopUp-cancelAction-color: #666;
+
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
 
diff --git a/scss/components/_cascader.scss b/scss/components/_cascader.scss
index 6c557ccd4..f1a0c60d0 100644
--- a/scss/components/_cascader.scss
+++ b/scss/components/_cascader.scss
@@ -95,4 +95,8 @@
   &-tab {
     padding: 0;
   }
+
+  &-btnCancel {
+    color: var(--PopUp-cancelAction-color);
+  }
 }
diff --git a/scss/components/_popup.scss b/scss/components/_popup.scss
index 7fb834cb4..8dde8fbf4 100644
--- a/scss/components/_popup.scss
+++ b/scss/components/_popup.scss
@@ -105,6 +105,7 @@
   }
 
   &-cancel {
+    color: var(--PopUp-cancelAction-color);
     margin-left: var(--gap-sm);
   }
 
diff --git a/scss/components/form/_date-range.scss b/scss/components/form/_date-range.scss
index 45e250c9b..b0f1fe31b 100644
--- a/scss/components/form/_date-range.scss
+++ b/scss/components/form/_date-range.scss
@@ -128,7 +128,7 @@
 }
 
 .#{$ns}DateRangePicker-popup {
-   height: 90vh;
+  height: px2rem(400px);
 }
 
 @include media-breakpoint-up(sm) {
diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss
index 6d9ef0efa..715bd7c97 100644
--- a/scss/components/form/_date.scss
+++ b/scss/components/form/_date.scss
@@ -123,7 +123,7 @@
 }
 
 .#{$ns}DatePicker-popup {
-  height: 80vh;
+  height: px2rem(300px);
 }
 
 .#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile {
diff --git a/src/components/Cascader.tsx b/src/components/Cascader.tsx
index 033c81184..0d103fde1 100644
--- a/src/components/Cascader.tsx
+++ b/src/components/Cascader.tsx
@@ -114,7 +114,6 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
     });
   }
 
-
   @autobind
   handleTabSelect(index: number) {
     const tabs = this.state.tabs.slice(0, index + 1);
@@ -543,14 +542,14 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
         <div className={cx(`Cascader-btnGroup`)}>
           <Button
             className={cx(`Cascader-btnCancel`)}
-            level="default"
+            level="text"
             onClick={onClose}
           >
             {__('cancel')}
           </Button>
           <Button
             className={cx(`Cascader-btnConfirm`)}
-            level="primary"
+            level="text"
             onClick={this.confirm}
           >
             {__('confirm')}
diff --git a/src/components/CityArea.tsx b/src/components/CityArea.tsx
index f76735a07..551c6d923 100644
--- a/src/components/CityArea.tsx
+++ b/src/components/CityArea.tsx
@@ -8,7 +8,6 @@ import ResultBox from './ResultBox';
 import {useSetState, useUpdateEffect} from '../hooks';
 import {localeable, LocaleProps} from '../locale';
 import {themeable, ThemeProps} from '../theme';
-import {Icon} from './icons';
 import {uncontrollable} from 'uncontrollable';
 import PopUp from './PopUp';
 import {PickerObjectOption} from './PickerColumn';
@@ -101,16 +100,12 @@ const CityArea = memo<AreaProps>(props => {
   });
   const [isOpened, setIsOpened] = useState(false);
 
-  const onChange = (
-    columnValues: Array<AreaColumnOption>,
-    columnIndex: number
-  ) => {
-    values[columnIndex] = columnValues[columnIndex]?.value;
+  const onChange = (columnValues: Array<number>, columnIndex: number) => {
     // 清空后面的值
-    while (values[columnIndex++]) {
-      values[columnIndex++] = -1;
+    while (columnValues[columnIndex++]) {
+      columnValues[columnIndex++] = -1;
     }
-    let [provience, city, district] = values;
+    let [provience, city, district] = columnValues;
     if (city === -1) {
       city = db.city?.[provience]?.[0];
     }
diff --git a/src/components/PopUp.tsx b/src/components/PopUp.tsx
index b0c230138..45c34fddf 100644
--- a/src/components/PopUp.tsx
+++ b/src/components/PopUp.tsx
@@ -56,19 +56,15 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
     if (this.props.isShow) {
       this.scrollTop =
         document.body.scrollTop || document.documentElement.scrollTop;
-      document.body.style.overflow =
-        'hidden';
+      document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow =
-        'auto';
-      document.body.scrollTop =
-        this.scrollTop;
+      document.body.style.overflow = 'auto';
+      document.body.scrollTop = this.scrollTop;
     }
   }
   componentWillUnmount() {
     document.body.style.overflow = 'auto';
-    document.body.scrollTop =
-      this.scrollTop;
+    document.body.scrollTop = this.scrollTop;
   }
   handleClick(e: React.MouseEvent) {
     e.stopPropagation();
@@ -128,7 +124,7 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                     <div className={cx(`${ns}PopUp-toolbar`)}>
                       <Button
                         className={cx(`${ns}PopUp-cancel`)}
-                        level="default"
+                        level="text"
                         onClick={onHide}
                       >
                         {__('cancel')}
@@ -138,7 +134,7 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                       )}
                       <Button
                         className={cx(`${ns}PopUp-confirm`)}
-                        level="primary"
+                        level="text"
                         onClick={onConfirm}
                       >
                         {__('confirm')}