diff --git a/src/packages/safearea/demos/taro/demo1.tsx b/src/packages/safearea/demos/taro/demo1.tsx
index 3302843844..d0492c2968 100644
--- a/src/packages/safearea/demos/taro/demo1.tsx
+++ b/src/packages/safearea/demos/taro/demo1.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollView, Text } from '@tarojs/components'
+import { ScrollView, Text, View } from '@tarojs/components'
 import { SafeArea } from '@nutui/nutui-react-taro'
 
 function generateRandomTextArray(count: number) {
@@ -20,8 +20,13 @@ function generateRandomTextArray(count: number) {
 const Demo1 = () => {
   return (
     <ScrollView>
+      <View style={{ backgroundColor: 'red' }}>
+        <SafeArea position="top" />
+      </View>
       <Text>{generateRandomTextArray(900).join(' ')}</Text>
-      <SafeArea position="bottom" />
+      <View style={{ backgroundColor: 'red' }}>
+        <SafeArea position="bottom" />
+      </View>
     </ScrollView>
   )
 }
diff --git a/src/packages/safearea/safearea.scss b/src/packages/safearea/safearea.scss
index 62b8722282..bbed5d12fa 100644
--- a/src/packages/safearea/safearea.scss
+++ b/src/packages/safearea/safearea.scss
@@ -1,5 +1,5 @@
 .nut-safe-area {
-  display: flex;
+  display: block;
   width: 100%;
 
   &-position-top {
diff --git a/src/packages/safearea/safearea.taro.tsx b/src/packages/safearea/safearea.taro.tsx
index 714cb7a889..1082b27b09 100644
--- a/src/packages/safearea/safearea.taro.tsx
+++ b/src/packages/safearea/safearea.taro.tsx
@@ -1,12 +1,29 @@
 import React, { FC } from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
 import { TaroSafeAreaProps } from '@/types'
+import { jd } from '../../utils/taro/platform'
 
 const classPrefix = 'nut-safe-area'
 export const SafeArea: FC<TaroSafeAreaProps> = (props) => {
+  const getSafeAreaStyle = () => {
+    if (jd()) {
+      const { screenHeight, safeArea } = Taro.getSystemInfoSync()
+      if (props.position === 'top') {
+        return { paddingTop: safeArea?.top || 0 }
+      }
+      if (props.position === 'bottom') {
+        const bottom = safeArea?.bottom || screenHeight
+        return { paddingBottom: screenHeight - bottom }
+      }
+    }
+    return {}
+  }
+
   return (
     <View
+      style={getSafeAreaStyle()}
       className={classNames(
         classPrefix,
         `${classPrefix}-position-${props.position}`
diff --git a/src/utils/taro/platform.ts b/src/utils/taro/platform.ts
index 02ff3e9072..475a759d33 100644
--- a/src/utils/taro/platform.ts
+++ b/src/utils/taro/platform.ts
@@ -5,6 +5,7 @@ export const harmony = () => {
     getEnv().toLowerCase()
   )
 }
+
 export const web = () => {
   return ['web'].includes(getEnv().toLowerCase())
 }
@@ -12,3 +13,11 @@ export const web = () => {
 export const miniprogram = () => {
   return ['mini'].includes(getEnv().toLowerCase())
 }
+
+export const weapp = () => {
+  return ['weapp'].includes(getEnv().toLowerCase())
+}
+
+export const jd = () => {
+  return ['jd'].includes(getEnv().toLowerCase())
+}