diff --git a/scripts/rn/copy-file.js b/scripts/rn/copy-file.js
index c495411490..8f56891cb0 100644
--- a/scripts/rn/copy-file.js
+++ b/scripts/rn/copy-file.js
@@ -76,7 +76,6 @@ const removeFile = async (url) => {
 }
 
 const modify = (fileUrl, importStatement) => {
-  if(!fse.ensureFileSync(fileUrl)) return
   fse.readFile(fileUrl, 'utf8').then((content) => {
     let modifiedContent = content
     modifiedContent = [importStatement, modifiedContent.slice(0)].join('')
diff --git a/src/config.json b/src/config.json
index 0f1959164d..ce5876b500 100644
--- a/src/config.json
+++ b/src/config.json
@@ -716,7 +716,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Badge",
           "type": "component",
           "cName": "徽标",
diff --git a/src/packages/badge/badge.harmony.css b/src/packages/badge/badge.harmony.css
index b5f2467d6f..6417a9a367 100644
--- a/src/packages/badge/badge.harmony.css
+++ b/src/packages/badge/badge.harmony.css
@@ -1,15 +1,17 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
 }
 .nut-badge-icon {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
-  top: -10%;
-  right: -15%;
+  background: #ff0f23;
   padding: 3px;
   text-align: center;
   border: 0px solid #ffffff;
@@ -27,7 +29,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: linear-gradient(135deg, #FF0F23 0%, #FF0F23 100%);
+  background: #ff0f23;
   color: #fff;
   padding: 0 4px;
   font-size: 10px;
@@ -45,7 +47,9 @@
   padding: 0;
 }
 .nut-badge-content {
-  transform: translateY(-50%) translateX(100%);
+  /* #ifndef rn */
+  transform: translateX(100%);
+  /* #endif */
 }
 .nut-badge-dot {
   width: 7px;
@@ -54,15 +58,8 @@
   border-radius: 7px;
   padding: 0;
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
-}
-[dir=rtl] .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
-}
-.nut-rtl .nut-badge-content {
-  transform: translateY(-50%) translateX(-100%);
+.nut-badge-outline {
+  background: #ffffff;
+  border: 1px solid #ff0f23;
+  color: #ff0f23;
 }
\ No newline at end of file
diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
index 27936ad30a..542780f14e 100644
--- a/src/packages/badge/badge.scss
+++ b/src/packages/badge/badge.scss
@@ -1,15 +1,16 @@
 .nut-badge {
   position: relative;
-  display: inline-block;
-
+  display: inline-flex;
+  width: auto;
+  /* #ifdef harmony */
+  min-width: 1px;
+  /* #endif */
   &-icon {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     background: $badge-background-color;
-    top: -10%;
-    right: -15%;
     padding: $badge-icon-padding;
     text-align: center;
     border: $badge-border;
@@ -49,7 +50,9 @@
   }
 
   &-content {
+    /* #ifndef rn */
     transform: $badge-content-transform;
+    /* #endif */
   }
 
   &-dot {
@@ -61,25 +64,8 @@
   }
 
   &-outline {
-    .nut-badge-content {
-      background: $color-primary-text;
-      border: 1px solid $color-primary;
-      color: $color-primary;
-    }
-  }
-}
-
-[dir='rtl'] .nut-badge,
-.nut-rtl .nut-badge {
-  &-icon {
-    right: auto;
-    left: -15%;
-  }
-
-  &-content {
-    transform: var(
-      --nutui-badge-content-transform,
-      translateY(-50%) translateX(-100%)
-    );
+    background: $color-primary-text;
+    border: 1px solid $color-primary;
+    color: $color-primary;
   }
 }
diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
index ce51accb21..6182390d7d 100644
--- a/src/packages/badge/badge.taro.tsx
+++ b/src/packages/badge/badge.taro.tsx
@@ -1,8 +1,18 @@
-import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useRtl } from '@/packages/configprovider/index.taro'
+import pxTransform from '@/utils/px-transform'
+import { getRectByTaro } from '@/utils/get-rect-by-taro'
+import { harmony, rn } from '@/utils/platform-taro'
 
 export type BadgeFill = 'solid' | 'outline'
 export interface BadgeProps extends BasicComponent {
@@ -42,9 +52,9 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     ...props,
   }
   const classPrefix = 'nut-badge'
-  const classes = classNames(classPrefix, className, {
-    [`${classPrefix}-${fill}`]: fill === 'outline',
-  })
+  const classes = classNames(classPrefix, className)
+  const badgeRef = useRef(null)
+  const [contentStyle, setContentStyle] = useState({})
 
   function content() {
     if (dot || typeof value === 'object' || value === 0) return null
@@ -66,41 +76,73 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     if (typeof value === 'string' && value) return value
   }
 
-  const contentClasses = classNames(
-    { [`${classPrefix}-dot`]: dot },
-    `${classPrefix}-content`,
-    { [`${classPrefix}-sup`]: isNumber() || isString() || dot },
-    {
-      [`${classPrefix}-one`]:
-        typeof content() === 'string' && `${content()}`?.length === 1,
+  const contentClasses = classNames(`${classPrefix}-content`, {
+    [`${classPrefix}-sup`]: isNumber() || isString() || dot,
+    [`${classPrefix}-one`]:
+      typeof content() === 'string' && `${content()}`?.length === 1,
+    [`${classPrefix}-dot`]: dot,
+    [`${classPrefix}-${fill}`]: fill === 'outline',
+  })
+
+  useEffect(() => {
+    if (badgeRef.current) {
+      getPositionStyle()
     }
-  )
-  const getStyle = () => {
+  }, [badgeRef.current])
+  const getPositionStyle = async () => {
     const style: CSSProperties = {}
-    style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
-    const dir = rtl ? 'left' : 'right'
-    style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
+    style.top = pxTransform(Number(-top) || 0)
+    if (rn()) {
+      const reacts = await getRectByTaro(badgeRef.current)
+      style.left =
+        reacts?.width && reacts?.width > Number(right)
+          ? pxTransform(reacts.width - Number(right))
+          : 0
+    } else {
+      const dir = rtl ? 'left' : 'right'
+      style[dir] = harmony()
+        ? pxTransform(Number(right))
+        : `${Number(right) || parseFloat(String(right)) || 0}px`
+    }
+    setContentStyle(style)
+  }
 
+  const getStyle = () => {
+    const style: CSSProperties = {}
     if (color) {
       if (fill === 'outline') {
         style.color = color
-        style.background = '#fff'
+        style.backgroundColor = '#fff'
         if (!color?.includes('gradient')) {
-          style.border = `1px solid ${color}`
+          style.borderColor = color
         }
       } else {
         style.color = '#fff'
-        style.background = color
+        style.backgroundColor = color
       }
     }
     return style
   }
+
   return (
-    <View className={classes} style={style}>
-      {isIcon() && <View className={`${classPrefix}-icon`}>{value}</View>}
+    <View className={classes} style={style} ref={badgeRef}>
+      {isIcon() && (
+        <View
+          className={classNames(`${classPrefix}-content`, {
+            [`${classPrefix}-icon`]: true,
+            [`${classPrefix}-icon-rtl`]: rtl,
+          })}
+          style={contentStyle}
+        >
+          {value}
+        </View>
+      )}
       {children}
       {!isIcon() && (
-        <View className={contentClasses} style={getStyle()}>
+        <View
+          className={contentClasses}
+          style={{ ...contentStyle, ...getStyle() }}
+        >
           {content()}
         </View>
       )}
diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx
index 5cb4acf0ae..a49031bc24 100644
--- a/src/packages/badge/badge.tsx
+++ b/src/packages/badge/badge.tsx
@@ -66,18 +66,16 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     if (typeof value === 'string' && value) return value
   }
 
-  const contentClasses = classNames(
-    { [`${classPrefix}-dot`]: dot },
-    `${classPrefix}-content`,
-    { [`${classPrefix}-sup`]: isNumber() || isString() || dot },
-    {
-      [`${classPrefix}-one`]:
-        typeof content() === 'string' && `${content()}`?.length === 1,
-    }
-  )
+  const contentClasses = classNames(`${classPrefix}-content`, {
+    [`${classPrefix}-sup`]: isNumber() || isString() || dot,
+    [`${classPrefix}-one`]:
+      typeof content() === 'string' && `${content()}`?.length === 1,
+    [`${classPrefix}-dot`]: dot,
+    [`${classPrefix}-${fill}`]: fill === 'outline',
+  })
   const getStyle = () => {
     const style: CSSProperties = {}
-    style.top = `${Number(top) || parseFloat(String(top)) || 0}px`
+    style.top = `${Number(-top) || parseFloat(String(-top)) || 0}px`
     const dir = rtl ? 'left' : 'right'
     style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
 
@@ -97,7 +95,16 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   }
   return (
     <div className={classes} style={style}>
-      {isIcon() && <div className={`${classPrefix}-icon`}>{value}</div>}
+      {isIcon() && (
+        <div
+          className={classNames(`${classPrefix}-content`, {
+            [`${classPrefix}-icon`]: true,
+            [`${classPrefix}-icon-rtl`]: rtl,
+          })}
+        >
+          {value}
+        </div>
+      )}
       {children}
       {!isIcon() && (
         <div className={contentClasses} style={getStyle()}>
diff --git a/src/packages/badge/demos/taro/demo1.tsx b/src/packages/badge/demos/taro/demo1.tsx
index 9d363b99e1..7fc6888734 100644
--- a/src/packages/badge/demos/taro/demo1.tsx
+++ b/src/packages/badge/demos/taro/demo1.tsx
@@ -1,21 +1,35 @@
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import React from 'react'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo1 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
-      <Badge style={{ marginInlineEnd: '40px' }} value={8}>
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={8}>
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value={76}>
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={76}>
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value="NEW">
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value="NEW">
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} dot top="2" right="4">
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} dot top="2" right="4">
+        {renderChildren()}
       </Badge>
     </Cell>
   )
diff --git a/src/packages/badge/demos/taro/demo2.tsx b/src/packages/badge/demos/taro/demo2.tsx
index add82dcc53..1868771651 100644
--- a/src/packages/badge/demos/taro/demo2.tsx
+++ b/src/packages/badge/demos/taro/demo2.tsx
@@ -1,18 +1,32 @@
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import React from 'react'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo2 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
-      <Badge style={{ marginInlineEnd: '40px' }} value={200} max={9}>
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={200} max={9}>
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value={200} max={20}>
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={200} max={20}>
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value={200} max={99}>
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={200} max={99}>
+        {renderChildren()}
       </Badge>
     </Cell>
   )
diff --git a/src/packages/badge/demos/taro/demo3.tsx b/src/packages/badge/demos/taro/demo3.tsx
index 097fc03467..48bab3061a 100644
--- a/src/packages/badge/demos/taro/demo3.tsx
+++ b/src/packages/badge/demos/taro/demo3.tsx
@@ -1,39 +1,53 @@
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import React from 'react'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo3 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
       <Badge
-        style={{ marginInlineEnd: '40px' }}
+        style={{ marginRight: pxTransform(40) }}
         value={8}
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        color="rgba(73,143,242,1)"
       >
-        <Avatar icon={<User />} shape="square" />
+        {renderChildren()}
       </Badge>
       <Badge
-        style={{ marginInlineEnd: '40px' }}
+        style={{ marginRight: pxTransform(40) }}
         value={76}
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        color="rgba(73,143,242,1)"
       >
-        <Avatar icon={<User />} shape="square" />
+        {renderChildren()}
       </Badge>
       <Badge
-        style={{ marginInlineEnd: '40px' }}
+        style={{ marginRight: pxTransform(40) }}
         value="NEW"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        color="rgba(73,143,242,1)"
       >
-        <Avatar icon={<User />} shape="square" />
+        {renderChildren()}
       </Badge>
       <Badge
-        style={{ marginInlineEnd: '40px' }}
+        style={{ marginRight: pxTransform(40) }}
         top="2"
         right="4"
         dot
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+        color="rgba(73,143,242,1)"
       >
-        <Avatar icon={<User />} shape="square" />
+        {renderChildren()}
       </Badge>
     </Cell>
   )
diff --git a/src/packages/badge/demos/taro/demo4.tsx b/src/packages/badge/demos/taro/demo4.tsx
index bdb4ae2d9f..8b5d86763e 100644
--- a/src/packages/badge/demos/taro/demo4.tsx
+++ b/src/packages/badge/demos/taro/demo4.tsx
@@ -1,33 +1,52 @@
-import {
-  Checklist,
-  Download,
-  Link as LinkIcon,
-  User,
-} from '@nutui/icons-react-taro'
+import { Checklist, User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import React from 'react'
+import { Icon } from '@tarojs/components'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo4 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
+
+  const renderIcon = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Icon type="success_no_circle" size={12} color="#FFFFFF" />
+        ) : (
+          <Checklist color="#fff" size={12} />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
-      <Badge
-        style={{ marginInlineEnd: '40px' }}
-        value={<Checklist color="#fff" />}
-      >
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={renderIcon()}>
+        {renderChildren()}
       </Badge>
-      <Badge
-        style={{ marginInlineEnd: '40px' }}
+      {/* <Badge
+        style={{ margin : '0 20px' }}
         value={<LinkIcon color="#fff" />}
       >
-        <Avatar icon={<User />} shape="square" />
+        {renderChildren()}
       </Badge>
       <Badge
-        style={{ marginInlineEnd: '40px' }}
+        style={{ margin : '0 20px' }}
         value={<Download color="#fff" />}
       >
-        <Avatar icon={<User />} shape="square" />
-      </Badge>
+        {renderChildren()}
+      </Badge> */}
     </Cell>
   )
 }
diff --git a/src/packages/badge/demos/taro/demo5.tsx b/src/packages/badge/demos/taro/demo5.tsx
index ccd72c43d9..068a38b3b4 100644
--- a/src/packages/badge/demos/taro/demo5.tsx
+++ b/src/packages/badge/demos/taro/demo5.tsx
@@ -1,29 +1,43 @@
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell, ConfigProvider } from '@nutui/nutui-react-taro'
 import React from 'react'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const customTheme = {
-  nutuiBadgeBorderRadius: '12px 12px 12px 0',
+  nutuiBadgeBorderRadius: `${pxTransform(12)} ${pxTransform(12)} ${pxTransform(12)} 0`,
 }
 
 const customTheme2 = {
-  nutuiBadgeDotWidth: '14px',
-  nutuiBadgeDotHeight: '14px',
-  nutuiBadgeBorder: '2px solid #fff',
+  nutuiBadgeDotWidth: pxTransform(14),
+  nutuiBadgeDotHeight: pxTransform(14),
+  nutuiBadgeBorder: `${pxTransform(2)} solid #000`,
 }
 
 const Demo5 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
       <ConfigProvider theme={customTheme}>
-        <Badge style={{ marginInlineEnd: '40px' }} value="NEW">
-          <Avatar icon={<User />} shape="square" />
+        <Badge style={{ marginRight: pxTransform(40) }} value="NEW">
+          {renderChildren()}
         </Badge>
       </ConfigProvider>
 
       <ConfigProvider theme={customTheme2}>
-        <Badge style={{ marginInlineEnd: '40px' }} dot top="2" right="8">
-          <Avatar icon={<User />} shape="square" />
+        <Badge style={{ marginRight: pxTransform(40) }} dot top="2">
+          {renderChildren()}
         </Badge>
       </ConfigProvider>
     </Cell>
diff --git a/src/packages/badge/demos/taro/demo6.tsx b/src/packages/badge/demos/taro/demo6.tsx
index b7232c7375..7d438ceaf1 100644
--- a/src/packages/badge/demos/taro/demo6.tsx
+++ b/src/packages/badge/demos/taro/demo6.tsx
@@ -1,18 +1,42 @@
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import React from 'react'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo6 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
-      <Badge style={{ marginInlineEnd: '40px' }} value={8} top="5" right="5">
-        <Avatar icon={<User />} shape="square" />
+      <Badge
+        style={{ marginRight: pxTransform(40) }}
+        value={8}
+        top="3"
+        right="5"
+      >
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value={76} top="10" right="10">
-        <Avatar icon={<User />} shape="square" />
+      <Badge
+        style={{ marginRight: pxTransform(40) }}
+        value={76}
+        top="-3"
+        right="10"
+      >
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value="NEW">
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value="NEW">
+        {renderChildren()}
       </Badge>
     </Cell>
   )
diff --git a/src/packages/badge/demos/taro/demo7.tsx b/src/packages/badge/demos/taro/demo7.tsx
index e7a679a4b1..371cb5cd3a 100644
--- a/src/packages/badge/demos/taro/demo7.tsx
+++ b/src/packages/badge/demos/taro/demo7.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import { Badge, Cell } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo7 = () => {
   return (
-    <Cell style={{ height: '80px' }}>
-      <Badge style={{ marginInlineEnd: '40px' }} value={8} />
-      <Badge style={{ marginInlineEnd: '40px' }} value={76} />
-      <Badge style={{ marginInlineEnd: '40px' }} value="NEW" />
+    <Cell style={{ height: pxTransform(80) }}>
+      <Badge style={{ marginRight: pxTransform(40) }} value={8} />
+      <Badge style={{ marginRight: pxTransform(40) }} value={76} />
+      <Badge style={{ marginRight: pxTransform(40) }} value="NEW" />
     </Cell>
   )
 }
diff --git a/src/packages/badge/demos/taro/demo8.tsx b/src/packages/badge/demos/taro/demo8.tsx
index 8fbac63a05..0f501b5691 100644
--- a/src/packages/badge/demos/taro/demo8.tsx
+++ b/src/packages/badge/demos/taro/demo8.tsx
@@ -1,23 +1,37 @@
 import { User } from '@nutui/icons-react-taro'
 import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import React from 'react'
+import pxTransform from '@/utils/px-transform'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const Demo8 = () => {
+  const isRnAndHarmony = harmonyAndRn()
+  const renderChildren = () => {
+    return (
+      <>
+        {isRnAndHarmony ? (
+          <Avatar shape="square">N</Avatar>
+        ) : (
+          <Avatar icon={<User />} shape="square" />
+        )}
+      </>
+    )
+  }
   return (
     <Cell>
-      <Badge style={{ marginInlineEnd: '40px' }} value={8} color="green">
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={8} color="green">
+        {renderChildren()}
       </Badge>
-      <Badge style={{ marginInlineEnd: '40px' }} value={76} fill="outline">
-        <Avatar icon={<User />} shape="square" />
+      <Badge style={{ marginRight: pxTransform(40) }} value={76} fill="outline">
+        {renderChildren()}
       </Badge>
       <Badge
-        style={{ marginInlineEnd: '40px' }}
+        style={{ marginRight: pxTransform(40) }}
         value="NEW"
         color="blue"
         fill="outline"
       >
-        <Avatar icon={<User />} shape="square" />
+        {renderChildren()}
       </Badge>
     </Cell>
   )
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e6c1da6599..c9744c1e74 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1572,7 +1572,7 @@ $tag-mark-border-radius: var(
 $badge-height: var(--nutui-badge-height, 14px) !default;
 $badge-background-color: var(
   --nutui-badge-background-color,
-  $color-primary-gradient-1
+  $color-primary
 ) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
@@ -1587,7 +1587,7 @@ $badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
 $badge-icon-size: var(--nutui-badge-icon-size, 12px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
-  translateY(-50%) translateX(100%)
+  translateX(100%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
 $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;