diff --git a/example/index.html b/example/index.html
index 151f92e398ca15fc4c2abcf9feafab3f3ebb4758..4251068d6cd406264087c23ec6cc561ff6ec5f1a 100644
--- a/example/index.html
+++ b/example/index.html
@@ -4,7 +4,7 @@
cube-ui lib
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
diff --git a/src/common/stylus/base.styl b/src/common/stylus/base.styl
index f5a15a75eb175be84c3d93760c875958fb5c3072..9d674ac1a64b7c2706f46e5f7d891c1633b59c7e 100644
--- a/src/common/stylus/base.styl
+++ b/src/common/stylus/base.styl
@@ -1,4 +1,5 @@
@require "./variable.styl"
+@require "./mixin.styl"
body, html
line-height: 1
@@ -52,6 +53,9 @@ body, html
height: 100%
transform-origin: left 0
+.cube-safe-area-pb
+ safe-area-mixin(padding-bottom, bottom, true)
+
@media (min-resolution: 2dppx)
.border-top-1px
&::before
diff --git a/src/common/stylus/mixin.styl b/src/common/stylus/mixin.styl
index e213cadedebeea0ccf8b762318d545fb286c5c89..84055b2c3a8ab807339960dbc074ca6ad9d4e44a 100644
--- a/src/common/stylus/mixin.styl
+++ b/src/common/stylus/mixin.styl
@@ -54,3 +54,10 @@ bg-image($url, $ext = ".png")
background-image: url($url + "@2x" + $ext)
@media (min-resolution: 3dppx)
background-image: url($url + "@3x" + $ext)
+
+functions = constant env
+safe-area-fn(fn, position)
+ s("%s(safe-area-inset-%s)", fn, position)
+safe-area-mixin(property, position, important = false)
+ for fn in functions
+ {property} safe-area-fn(fn, position) important == true ? !important : unquote("")
diff --git a/src/common/stylus/theme/default.styl b/src/common/stylus/theme/default.styl
index 4fa229cf1fdb9ca3ee3af7bcc5a0c6dd4adeee32..50b9d180ba3d25e1bc6f2c745def0fb011309d72 100644
--- a/src/common/stylus/theme/default.styl
+++ b/src/common/stylus/theme/default.styl
@@ -6,6 +6,7 @@ $action-sheet-active-color := $color-orange
$action-sheet-bgc := $color-white
$action-sheet-active-bgc := $color-light-grey-opacity
$action-sheet-title-color := $color-dark-grey
+$action-sheet-space-bgc := $color-mask-bg
/// picker style
$action-sheet-picker-cancel-color := $color-light-grey
$action-sheet-picker-cancel-active-color := $color-light-grey-s
diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue
index d56e3ff25cb7deeea9d62d3035d20bcb74bf215f..436b36c15c8e56ea0c2126e67ebdccd4d71c6cc7 100644
--- a/src/components/action-sheet/action-sheet.vue
+++ b/src/components/action-sheet/action-sheet.vue
@@ -9,7 +9,7 @@
@touchmove.prevent="noop"
@click="cancel">
-
+
{{title}}
@@ -94,6 +94,7 @@
.cube-action-sheet-panel
text-align: center
font-size: $fontsize-medium
+ background-color: $action-sheet-bgc
.cube-action-sheet-move-enter, .cube-action-sheet-move-leave-active
transform: translate3d(0, 100%, 0)
.cube-action-sheet-move-enter-active, .cube-action-sheet-move-leave-active
@@ -142,6 +143,7 @@
.cube-action-sheet-space
height: 6px
+ background-color: $action-sheet-space-bgc
.cube-action-sheet-item_active
color: $action-sheet-active-color
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 9ac20c6ca0752eedfaeabc1161577e1e0d3f3ee5..fc078c6eff0e5907bde6a1a0097c2d977b986cc6 100644
--- a/src/components/picker/picker.vue
+++ b/src/components/picker/picker.vue
@@ -8,7 +8,7 @@
@touchmove.prevent
@mask-click="cancel">
-
+
{{cancelTxt}}
{{confirmTxt}}