diff --git a/src/config.json b/src/config.json
index 05e6d9d277..70976e92f3 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1012,7 +1012,7 @@
           "show": true,
           "taro": true,
           "author": "swag~jun",
-          "dd": false
+          "dd": true
         },
         {
           "version": "3.0.0",
diff --git a/src/packages/avatar/demo.scss b/src/packages/avatar/demo.scss
index e5934b9b93..ff0ac25f63 100644
--- a/src/packages/avatar/demo.scss
+++ b/src/packages/avatar/demo.scss
@@ -2,10 +2,4 @@
 .avatar-demo .nut-cell {
   align-items: flex-end;
   border-radius: 0;
-
-  & > div,
-  & > taro-view-core,
-  & > view {
-    margin-inline-end: 30px;
-  }
 }
diff --git a/src/packages/avatar/demos/h5/demo1.tsx b/src/packages/avatar/demos/h5/demo1.tsx
index 48b5b53c70..efca981431 100644
--- a/src/packages/avatar/demos/h5/demo1.tsx
+++ b/src/packages/avatar/demos/h5/demo1.tsx
@@ -2,15 +2,18 @@ import React from 'react'
 import { Avatar, Cell } from '@nutui/nutui-react'
 
 const Demo1 = () => {
+  const styles = { marginRight: '30px' }
   return (
     <Cell align="flex-end">
       <Avatar
         size="large"
         src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        style={styles}
       />
       <Avatar
         size="normal"
         src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        style={styles}
       />
       <Avatar
         size="small"
diff --git a/src/packages/avatar/demos/h5/demo2.tsx b/src/packages/avatar/demos/h5/demo2.tsx
index 6da5283dcc..8f859793a5 100644
--- a/src/packages/avatar/demos/h5/demo2.tsx
+++ b/src/packages/avatar/demos/h5/demo2.tsx
@@ -3,9 +3,10 @@ import { Avatar, Cell } from '@nutui/nutui-react'
 import { User } from '@nutui/icons-react'
 
 const Demo2 = () => {
+  const styles = { marginRight: '30px' }
   return (
     <Cell>
-      <Avatar icon={<User />} shape="square" />
+      <Avatar icon={<User />} shape="square" style={styles} />
       <Avatar icon={<User />} shape="round" />
     </Cell>
   )
diff --git a/src/packages/avatar/demos/h5/demo3.tsx b/src/packages/avatar/demos/h5/demo3.tsx
index 762d8d855e..ff65873d4b 100644
--- a/src/packages/avatar/demos/h5/demo3.tsx
+++ b/src/packages/avatar/demos/h5/demo3.tsx
@@ -3,10 +3,14 @@ import { Avatar, Cell } from '@nutui/nutui-react'
 import { User } from '@nutui/icons-react'
 
 const Demo3 = () => {
+  const styles = { marginRight: '30px' }
   return (
     <Cell>
-      <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
-      <Avatar icon={<User />} />
+      <Avatar
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        style={styles}
+      />
+      <Avatar icon={<User />} style={styles} />
       <Avatar>N</Avatar>
     </Cell>
   )
diff --git a/src/packages/avatar/demos/h5/demo4.tsx b/src/packages/avatar/demos/h5/demo4.tsx
index b2b9cf73d1..ec116b2d71 100644
--- a/src/packages/avatar/demos/h5/demo4.tsx
+++ b/src/packages/avatar/demos/h5/demo4.tsx
@@ -3,12 +3,14 @@ import { Avatar, Cell } from '@nutui/nutui-react'
 import { User } from '@nutui/icons-react'
 
 const Demo4 = () => {
+  const styles = { marginRight: '30px' }
   return (
     <Cell>
       <Avatar
         color="#fff"
         background="var(--nutui-color-primary)"
         icon={<User />}
+        style={styles}
       />
       <Avatar
         color="var(--nutui-color-primary)"
diff --git a/src/packages/avatar/demos/h5/demo5.tsx b/src/packages/avatar/demos/h5/demo5.tsx
index 9dd01c596d..deca177b7a 100644
--- a/src/packages/avatar/demos/h5/demo5.tsx
+++ b/src/packages/avatar/demos/h5/demo5.tsx
@@ -3,9 +3,10 @@ import { Avatar, Badge, Cell } from '@nutui/nutui-react'
 import { User } from '@nutui/icons-react'
 
 const Demo5 = () => {
+  const styles = { marginRight: '30px' }
   return (
     <Cell>
-      <Badge value="8">
+      <Badge value="8" style={styles}>
         <Avatar icon={<User />} shape="square" />
       </Badge>
       <Badge dot>
diff --git a/src/packages/avatar/demos/taro/demo1.tsx b/src/packages/avatar/demos/taro/demo1.tsx
index be4dc2076c..f93d413c15 100644
--- a/src/packages/avatar/demos/taro/demo1.tsx
+++ b/src/packages/avatar/demos/taro/demo1.tsx
@@ -2,13 +2,18 @@ import React from 'react'
 import { Avatar, Cell } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
+  const styles = { marginRight: 30 }
   return (
     <Cell className="cell-avatar" align="flex-end">
       <Avatar
         size="60"
         src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+        style={styles}
+      />
+      <Avatar
+        style={styles}
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       />
-      <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
       <Avatar
         size="32"
         src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
diff --git a/src/packages/avatar/demos/taro/demo2.tsx b/src/packages/avatar/demos/taro/demo2.tsx
index 1a16eec983..b095770fa7 100644
--- a/src/packages/avatar/demos/taro/demo2.tsx
+++ b/src/packages/avatar/demos/taro/demo2.tsx
@@ -3,9 +3,10 @@ import { Avatar, Cell } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
 
 const Demo2 = () => {
+  const styles = { marginRight: 30 }
   return (
     <Cell className="cell-avatar">
-      <Avatar icon={<User />} shape="square" />
+      <Avatar icon={<User />} shape="square" style={styles} />
       <Avatar icon={<User />} shape="round" />
     </Cell>
   )
diff --git a/src/packages/avatar/demos/taro/demo3.tsx b/src/packages/avatar/demos/taro/demo3.tsx
index 6c0f891e8b..e9a10ed72d 100644
--- a/src/packages/avatar/demos/taro/demo3.tsx
+++ b/src/packages/avatar/demos/taro/demo3.tsx
@@ -3,10 +3,14 @@ import { Avatar, Cell } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
 
 const Demo3 = () => {
+  const styles = { marginRight: 30 }
   return (
     <Cell className="cell-avatar">
-      <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" />
-      <Avatar icon={<User />} />
+      <Avatar
+        style={styles}
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+      />
+      <Avatar style={styles} icon={<User />} />
       <Avatar>N</Avatar>
     </Cell>
   )
diff --git a/src/packages/avatar/demos/taro/demo4.tsx b/src/packages/avatar/demos/taro/demo4.tsx
index eca54d257c..7ca77375a5 100644
--- a/src/packages/avatar/demos/taro/demo4.tsx
+++ b/src/packages/avatar/demos/taro/demo4.tsx
@@ -4,12 +4,14 @@ import { User } from '@nutui/icons-react-taro'
 import { harmony } from '@/utils/platform-taro'
 
 const Demo4 = () => {
+  const styles = { marginRight: 30 }
   return (
     <Cell className="cell-avatar">
       <Avatar
         color="#ffffff"
         background={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
         icon={<User />}
+        style={styles}
       />
       <Avatar
         color={`${harmony() ? '#ff0f23' : 'var(--nutui-color-primary)'}`}
diff --git a/src/packages/avatar/demos/taro/demo5.tsx b/src/packages/avatar/demos/taro/demo5.tsx
index 3568f321f4..dbfeffe3ea 100644
--- a/src/packages/avatar/demos/taro/demo5.tsx
+++ b/src/packages/avatar/demos/taro/demo5.tsx
@@ -1,22 +1,17 @@
 import React from 'react'
-// import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
-import { Avatar, Cell } from '@nutui/nutui-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
 import { User } from '@nutui/icons-react-taro'
-import { harmony } from '@/utils/platform-taro'
 
 const Demo5 = () => {
+  const styles = { marginRight: 30 }
   return (
     <Cell className="cell-avatar">
-      {harmony() ? null : (
-        <>
-          {/* <Badge value="8"> */}
-          <Avatar icon={<User />} shape="square" />
-          {/* </Badge> */}
-          {/* <Badge dot> */}
-          <Avatar icon={<User />} shape="square" />
-          {/* </Badge> */}
-        </>
-      )}
+      <Badge value="8" style={styles}>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge dot>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
     </Cell>
   )
 }
diff --git a/src/packages/hoverbutton/demos/taro/demo3.tsx b/src/packages/hoverbutton/demos/taro/demo3.tsx
index a474f5a9a6..d39e037d33 100644
--- a/src/packages/hoverbutton/demos/taro/demo3.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo3.tsx
@@ -5,21 +5,18 @@ import React from 'react'
 import { HoverButton, Tabbar } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
 import { Cart, Category, Hi, Home, User } from '@nutui/icons-react-taro'
-import { harmony } from '@/utils/platform-taro'
 
 const Demo3 = () => {
   return (
     <View>
       <HoverButton icon={<Cart />} tabbarHeight={48} />
-      {harmony() ? null : (
-        <Tabbar fixed>
-          <Tabbar.Item title="首页" icon={<Home size={18} />} />
-          <Tabbar.Item title="分类" icon={<Category size={18} />} />
-          <Tabbar.Item title="逛" icon={<Hi size={18} />} />
-          <Tabbar.Item title="购物车" icon={<Cart size={18} />} />
-          <Tabbar.Item title="我的" icon={<User size={18} />} />
-        </Tabbar>
-      )}
+      <Tabbar fixed>
+        <Tabbar.Item title="首页" icon={<Home size={18} />} />
+        <Tabbar.Item title="分类" icon={<Category size={18} />} />
+        <Tabbar.Item title="逛" icon={<Hi size={18} />} />
+        <Tabbar.Item title="购物车" icon={<Cart size={18} />} />
+        <Tabbar.Item title="我的" icon={<User size={18} />} />
+      </Tabbar>
     </View>
   )
 }
diff --git a/src/packages/hoverbutton/demos/taro/demo5.tsx b/src/packages/hoverbutton/demos/taro/demo5.tsx
index c45339bd2f..1323dbb211 100644
--- a/src/packages/hoverbutton/demos/taro/demo5.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo5.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { HoverButton, ConfigProvider } from '@nutui/nutui-react-taro'
 import { Cart } from '@nutui/icons-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const customSpacing = {
-  nutuiHoverbuttonSpacing: '40px',
-  nutuiHoverbuttonPositionBottom: '100px',
-  nutuiHoverbuttonPositionRight: '50px',
+  nutuiHoverbuttonSpacing: pxTransform(40),
+  nutuiHoverbuttonPositionBottom: pxTransform(100),
+  nutuiHoverbuttonPositionRight: pxTransform(50),
   nutuiHoverbuttonItemBorderColor: '#FA2C19',
   nutuiHoverbuttonItemBackground: '#FFEAE8',
   nutuiHoverbuttonItemBackgroundActive: '#FEC3BE',
diff --git a/src/packages/hoverbutton/demos/taro/demo6.tsx b/src/packages/hoverbutton/demos/taro/demo6.tsx
index 3104f48b84..bcfbf25432 100644
--- a/src/packages/hoverbutton/demos/taro/demo6.tsx
+++ b/src/packages/hoverbutton/demos/taro/demo6.tsx
@@ -4,7 +4,6 @@
 import React from 'react'
 import { HoverButton } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
-import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   return (
@@ -42,7 +41,6 @@ const Demo1 = () => {
           <View
             style={{
               fontSize: 10,
-              lineHeight: pxTransform(9),
               fontFamily: 'JD',
             }}
           >
diff --git a/src/packages/icon/demo.taro.tsx b/src/packages/icon/demo.taro.tsx
index 84d47967c4..69767e0c91 100644
--- a/src/packages/icon/demo.taro.tsx
+++ b/src/packages/icon/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-// import '@nutui/icons-react-taro/dist/style_iconfont.css'
 import { Toast } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
diff --git a/src/packages/icon/demos/taro/demo1.tsx b/src/packages/icon/demos/taro/demo1.tsx
index 31f192d76a..720abb018b 100644
--- a/src/packages/icon/demos/taro/demo1.tsx
+++ b/src/packages/icon/demos/taro/demo1.tsx
@@ -5,9 +5,9 @@ import { Add, Dongdong, UserAdd, Minus } from '@nutui/icons-react-taro'
 const Demo1 = () => {
   return (
     <Cell>
-      <Add color="red" style={{ marginRight: '10px' }} />
-      <UserAdd style={{ marginRight: '10px' }} />
-      <Dongdong style={{ marginRight: '10px' }} />
+      <Add color="red" style={{ marginRight: 10 }} />
+      <UserAdd style={{ marginRight: 10 }} />
+      <Dongdong style={{ marginRight: 10 }} />
       <Minus />
     </Cell>
   )
diff --git a/src/packages/icon/demos/taro/demo2.tsx b/src/packages/icon/demos/taro/demo2.tsx
index 7644599a78..807429711a 100644
--- a/src/packages/icon/demos/taro/demo2.tsx
+++ b/src/packages/icon/demos/taro/demo2.tsx
@@ -5,8 +5,8 @@ import { IconFont } from '@nutui/icons-react-taro'
 const Demo2 = () => {
   return (
     <Cell>
-      <IconFont name="dongdong" style={{ marginRight: '10px' }} />
-      <IconFont name="add" style={{ marginRight: '10px' }} />
+      <IconFont name="dongdong" style={{ marginRight: 10 }} />
+      <IconFont name="add" style={{ marginRight: 10 }} />
       <IconFont name="minus" />
     </Cell>
   )
diff --git a/src/packages/icon/demos/taro/demo4.tsx b/src/packages/icon/demos/taro/demo4.tsx
index 8be9aec196..e173686957 100644
--- a/src/packages/icon/demos/taro/demo4.tsx
+++ b/src/packages/icon/demos/taro/demo4.tsx
@@ -5,8 +5,8 @@ import { Dongdong } from '@nutui/icons-react-taro'
 const Demo4 = () => {
   return (
     <Cell>
-      <Dongdong color="#FF0F23" style={{ marginRight: '10px' }} />
-      <Dongdong color="#64b578" style={{ marginRight: '10px' }} />
+      <Dongdong color="#FF0F23" style={{ marginRight: 10 }} />
+      <Dongdong color="#64b578" style={{ marginRight: 10 }} />
       <Dongdong color="#ffd700" />
     </Cell>
   )
diff --git a/src/packages/icon/demos/taro/demo5.tsx b/src/packages/icon/demos/taro/demo5.tsx
index f8d98e9cdf..1eec3927f0 100644
--- a/src/packages/icon/demos/taro/demo5.tsx
+++ b/src/packages/icon/demos/taro/demo5.tsx
@@ -5,8 +5,8 @@ import { Dongdong } from '@nutui/icons-react-taro'
 const Demo5 = () => {
   return (
     <Cell style={{ alignItems: 'center' }}>
-      <Dongdong size="16" style={{ marginRight: '10px' }} />
-      <Dongdong size="20" style={{ marginRight: '10px' }} />
+      <Dongdong size="16" style={{ marginRight: 10 }} />
+      <Dongdong size="20" style={{ marginRight: 10 }} />
       <Dongdong size="24" />
     </Cell>
   )
diff --git a/src/packages/icon/demos/taro/demo6.tsx b/src/packages/icon/demos/taro/demo6.tsx
index dea950d59e..1e820de5e9 100644
--- a/src/packages/icon/demos/taro/demo6.tsx
+++ b/src/packages/icon/demos/taro/demo6.tsx
@@ -53,7 +53,7 @@ const Demo6 = () => {
                       }}
                       style={{
                         maxWidth: '25%',
-                        height: '60px',
+                        height: 60,
                         display: 'flex',
                         flex: '0 0 25%',
                         flexDirection: 'column',
diff --git a/src/packages/icon/demos/taro/demo7.tsx b/src/packages/icon/demos/taro/demo7.tsx
index 94ea54df91..488a94398d 100644
--- a/src/packages/icon/demos/taro/demo7.tsx
+++ b/src/packages/icon/demos/taro/demo7.tsx
@@ -54,7 +54,7 @@ const Demo7 = () => {
                       }}
                       style={{
                         maxWidth: '25%',
-                        height: '60px',
+                        height: 60,
                         display: 'flex',
                         flex: '0 0 25%',
                         flexDirection: 'column',
diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
index 57d07342bd..baf26a46e4 100644
--- a/src/packages/progress/demos/taro/demo6.tsx
+++ b/src/packages/progress/demos/taro/demo6.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Progress, Cell } from '@nutui/nutui-react-taro'
 import { Checked, Tips } from '@nutui/icons-react-taro'
+import { harmony } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo6 = () => {
@@ -9,6 +10,9 @@ const Demo6 = () => {
     marginLeft: pxTransform(5),
     marginRight: pxTransform(5),
   }
+  const progressStyle = {
+    width: harmony() ? '95%' : '100%',
+  }
   return (
     <>
       <Cell>
@@ -19,7 +23,7 @@ const Demo6 = () => {
         />
       </Cell>
       <Cell align="center">
-        <Progress percent={100} />
+        <Progress percent={100} style={progressStyle} />
         <Checked color="green" style={iconStyle} />
       </Cell>
       <Cell align="center">
@@ -27,6 +31,7 @@ const Demo6 = () => {
           percent={100}
           color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
           strokeWidth="15"
+          style={progressStyle}
         />
         <Tips color="#FF0000" style={iconStyle} />
       </Cell>
diff --git a/src/packages/skeleton/demo.taro.tsx b/src/packages/skeleton/demo.taro.tsx
index 9fc6c71797..9f33d74b64 100644
--- a/src/packages/skeleton/demo.taro.tsx
+++ b/src/packages/skeleton/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import './demo.scss'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
@@ -10,7 +9,6 @@ import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
-import { harmony } from '@/utils/platform-taro'
 
 const SkeletonDemo = () => {
   const [translated] = useTranslate({
@@ -42,29 +40,15 @@ const SkeletonDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated['84aa6bce']}</View>
-        <Cell style={{ display: 'block', paddingTop: '3px' }}>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.ea3bc18a}</View>
-        <Cell style={{ display: 'block' }}>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated['02a53df5']}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
-        {harmony() ? null : (
-          <>
-            <View className="h2">{translated['0a001122']}</View>
-            <Cell style={{ display: 'block' }}>
-              <Demo4 />
-            </Cell>
-          </>
-        )}
+        <Demo3 />
+        <View className="h2">{translated['0a001122']}</View>
+        <Demo4 />
         <View className="h2">{translated['07d62d5c']}</View>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/skeleton/demo.tsx b/src/packages/skeleton/demo.tsx
index e4b42d58b5..5e2cc79e2f 100644
--- a/src/packages/skeleton/demo.tsx
+++ b/src/packages/skeleton/demo.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Cell from '@/packages/cell'
 import { useTranslate } from '@/sites/assets/locale'
 import './demo.scss'
 import Demo1 from './demos/h5/demo1'
@@ -37,25 +36,15 @@ const SkeletonDemo = () => {
     <>
       <div className="demo">
         <h2>{translated['84aa6bce']}</h2>
-        <Cell style={{ display: 'block' }}>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.ea3bc18a}</h2>
-        <Cell style={{ display: 'block', paddingTop: '3px' }}>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated['02a53df5']}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated['0a001122']}</h2>
-        <Cell style={{ display: 'block' }}>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated['07d62d5c']}</h2>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
       </div>
     </>
   )
diff --git a/src/packages/skeleton/demos/h5/demo1.tsx b/src/packages/skeleton/demos/h5/demo1.tsx
index 7eafe0f800..568f0cb55b 100644
--- a/src/packages/skeleton/demos/h5/demo1.tsx
+++ b/src/packages/skeleton/demos/h5/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Skeleton } from '@nutui/nutui-react'
+import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  return <Skeleton animated />
+  return (
+    <Cell style={{ display: 'block' }}>
+      <Skeleton animated />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/skeleton/demos/h5/demo2.tsx b/src/packages/skeleton/demos/h5/demo2.tsx
index ab7450a834..ba33053f22 100644
--- a/src/packages/skeleton/demos/h5/demo2.tsx
+++ b/src/packages/skeleton/demos/h5/demo2.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Skeleton } from '@nutui/nutui-react'
+import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo2 = () => {
-  return <Skeleton rows={3} title animated />
+  return (
+    <Cell style={{ display: 'block', paddingTop: '3px' }}>
+      <Skeleton rows={3} title animated />
+    </Cell>
+  )
 }
 export default Demo2
diff --git a/src/packages/skeleton/demos/h5/demo3.tsx b/src/packages/skeleton/demos/h5/demo3.tsx
index ba71164d66..33ac5a533b 100644
--- a/src/packages/skeleton/demos/h5/demo3.tsx
+++ b/src/packages/skeleton/demos/h5/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Skeleton } from '@nutui/nutui-react'
+import { Cell, Skeleton } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Skeleton rows={3} title animated avatar avatarSize="100px" />
+  return (
+    <Cell>
+      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/skeleton/demos/h5/demo4.tsx b/src/packages/skeleton/demos/h5/demo4.tsx
index 2fc57b7de4..48671847d9 100644
--- a/src/packages/skeleton/demos/h5/demo4.tsx
+++ b/src/packages/skeleton/demos/h5/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Skeleton, ConfigProvider } from '@nutui/nutui-react'
+import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <ConfigProvider
-      theme={{
-        nutuiSkeletonLineBorderRadius: '10px',
-      }}
-    >
-      <Skeleton rows={3} animated />
-    </ConfigProvider>
+    <Cell style={{ display: 'block' }}>
+      <ConfigProvider
+        theme={{
+          nutuiSkeletonLineBorderRadius: '10px',
+        }}
+      >
+        <Skeleton rows={3} animated />
+      </ConfigProvider>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/skeleton/demos/h5/demo5.tsx b/src/packages/skeleton/demos/h5/demo5.tsx
index a0930586c3..68de14ddd5 100644
--- a/src/packages/skeleton/demos/h5/demo5.tsx
+++ b/src/packages/skeleton/demos/h5/demo5.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react'
+import { Cell, Avatar, Image, Skeleton, Switch } from '@nutui/nutui-react'
 import React, { useState } from 'react'
 
 const Demo5 = () => {
@@ -11,32 +11,34 @@ const Demo5 = () => {
     setChecked(value)
   }
   return (
-    <div style={{ width: '100%' }}>
-      <Switch
-        onChange={(value, event) => changeStatus(value, event)}
-        style={{ marginBottom: '8px' }}
-      />
-      <Skeleton title animated avatar rows={3} visible={checked}>
-        <div className="nut-skeleton-content">
-          <Avatar
-            className="nut-skeleton-content-avatar"
-            size="50"
-            icon={
-              <Image
-                loading={false}
-                src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-              />
-            }
-          />
-          <div>
-            <span>NutUI-React</span>
+    <Cell>
+      <div style={{ width: '100%' }}>
+        <Switch
+          onChange={(value, event) => changeStatus(value, event)}
+          style={{ marginBottom: '8px' }}
+        />
+        <Skeleton title animated avatar rows={3} visible={checked}>
+          <div className="nut-skeleton-content">
+            <Avatar
+              className="nut-skeleton-content-avatar"
+              size="50"
+              icon={
+                <Image
+                  loading={false}
+                  src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+                />
+              }
+            />
             <div>
-              一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+              <span>NutUI-React</span>
+              <div>
+                一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+              </div>
             </div>
           </div>
-        </div>
-      </Skeleton>
-    </div>
+        </Skeleton>
+      </div>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/skeleton/demos/taro/demo1.tsx b/src/packages/skeleton/demos/taro/demo1.tsx
index a18085573d..072b8236ee 100644
--- a/src/packages/skeleton/demos/taro/demo1.tsx
+++ b/src/packages/skeleton/demos/taro/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Skeleton } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  return <Skeleton animated />
+  return (
+    <Cell style={{ display: 'block', paddingTop: '3px' }}>
+      <Skeleton animated />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/skeleton/demos/taro/demo2.tsx b/src/packages/skeleton/demos/taro/demo2.tsx
index c866d16330..b0b5cac29e 100644
--- a/src/packages/skeleton/demos/taro/demo2.tsx
+++ b/src/packages/skeleton/demos/taro/demo2.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Skeleton } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
-  return <Skeleton rows={3} title animated />
+  return (
+    <Cell style={{ display: 'block' }}>
+      <Skeleton rows={3} title animated />
+    </Cell>
+  )
 }
 export default Demo2
diff --git a/src/packages/skeleton/demos/taro/demo3.tsx b/src/packages/skeleton/demos/taro/demo3.tsx
index bcd7ff4fda..204137ad8f 100644
--- a/src/packages/skeleton/demos/taro/demo3.tsx
+++ b/src/packages/skeleton/demos/taro/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Skeleton } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Skeleton rows={3} title animated avatar avatarSize="100px" />
+  return (
+    <Cell>
+      <Skeleton rows={3} title animated avatar avatarSize="100px" />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/skeleton/demos/taro/demo4.tsx b/src/packages/skeleton/demos/taro/demo4.tsx
index aa9fce8875..8bf0c9c6e0 100644
--- a/src/packages/skeleton/demos/taro/demo4.tsx
+++ b/src/packages/skeleton/demos/taro/demo4.tsx
@@ -1,15 +1,18 @@
 import React from 'react'
-import { Skeleton, ConfigProvider } from '@nutui/nutui-react-taro'
+import { Cell, Skeleton, ConfigProvider } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
   return (
-    <ConfigProvider
-      theme={{
-        nutuiSkeletonLineBorderRadius: '10px',
-      }}
-    >
-      <Skeleton rows={3} animated />
-    </ConfigProvider>
+    <Cell style={{ display: 'block' }}>
+      <ConfigProvider
+        theme={{
+          nutuiSkeletonLineBorderRadius: pxTransform(10),
+        }}
+      >
+        <Skeleton rows={3} animated />
+      </ConfigProvider>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx
index 7cf397d389..87d7a25b0f 100644
--- a/src/packages/skeleton/demos/taro/demo5.tsx
+++ b/src/packages/skeleton/demos/taro/demo5.tsx
@@ -1,6 +1,7 @@
-import { Avatar, Skeleton, Switch } from '@nutui/nutui-react-taro'
+import { Avatar, Cell, Skeleton, Switch } from '@nutui/nutui-react-taro'
 import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo5 = () => {
   const [checked, setChecked] = useState(false)
@@ -12,38 +13,42 @@ const Demo5 = () => {
     setChecked(value)
   }
   return (
-    <View style={{ width: '100%' }}>
-      <View
-        style={{
-          display: 'flex',
-          justifyContent: 'flex-start',
-        }}
-      >
-        <Switch
-          onChange={(value, event: any) => changeStatus(value, event)}
-          style={{ marginBottom: 8 }}
-        />
-      </View>
-      <Skeleton title animated avatar rows={3} visible={checked}>
+    <Cell>
+      <View style={{ width: '100%' }}>
         <View
-          className="nut-skeleton-content"
-          style={{ display: 'flex', flexDirection: 'row' }}
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-start',
+          }}
         >
-          <Avatar
-            className="nut-skeleton-content-avatar"
-            style={{ marginRight: '20px' }}
-            size="50"
-            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          <Switch
+            onChange={(value, event: any) => changeStatus(value, event)}
+            style={{ marginBottom: 8 }}
           />
-          <View className="nut-skeleton-content-line">
-            <Text>NutUI-React</Text>
-            <View style={{ marginTop: '10px', width: '70%' }}>
-              一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+        </View>
+        <Skeleton title animated avatar rows={3} visible={checked}>
+          <View
+            className="nut-skeleton-content"
+            style={{ display: 'flex', flexDirection: 'row' }}
+          >
+            <Avatar
+              className="nut-skeleton-content-avatar"
+              style={{ marginRight: 20 }}
+              size="50"
+              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+            />
+            <View className="nut-skeleton-content-line">
+              <Text>NutUI-React</Text>
+              <View
+                style={{ marginTop: 10, width: harmony() ? '80%' : '100%' }}
+              >
+                一套京东风格的轻量级移动端React组件库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+              </View>
             </View>
           </View>
-        </View>
-      </Skeleton>
-    </View>
+        </Skeleton>
+      </View>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/swiper/demos/taro/demo5.tsx b/src/packages/swiper/demos/taro/demo5.tsx
index 1bce7d7d6a..a01ad177d8 100644
--- a/src/packages/swiper/demos/taro/demo5.tsx
+++ b/src/packages/swiper/demos/taro/demo5.tsx
@@ -3,7 +3,6 @@ import { Swiper } from '@nutui/nutui-react-taro'
 import { Image, Text, View } from '@tarojs/components'
 import { ArrowLeft, ArrowRight } from '@nutui/icons-react-taro'
 import pxTransform from '@/utils/px-transform'
-import { harmony } from '@/utils/platform-taro'
 
 function Demo5() {
   const swiperRef = React.useRef<any>(null)
@@ -63,10 +62,10 @@ function Demo5() {
       </Swiper>
       <View style={btnsStyle as any}>
         <View style={spanStyle} onClick={(e) => swiperRef.current?.prev()}>
-          {!harmony() ? <ArrowLeft /> : null}
+          <ArrowLeft />
         </View>
         <View style={spanStyle} onClick={(e) => swiperRef.current?.next()}>
-          {!harmony() ? <ArrowRight /> : null}
+          <ArrowRight />
         </View>
       </View>
     </View>
diff --git a/src/packages/tabbar/demo.taro.tsx b/src/packages/tabbar/demo.taro.tsx
index e97344a70d..46b8b05d09 100644
--- a/src/packages/tabbar/demo.taro.tsx
+++ b/src/packages/tabbar/demo.taro.tsx
@@ -69,7 +69,7 @@ const TabbarDemo = () => {
         <Demo7 />
         <View className="h2">{translated['8dab2f66']}</View>
         <Demo8 />
-        <View className="h2" style={{ marginBottom: '100px' }}>
+        <View className="h2" style={{ marginBottom: 100 }}>
           {translated.cfbdc781}
         </View>
         <Demo9 />
diff --git a/src/packages/tabs/demos/taro/demo22.tsx b/src/packages/tabs/demos/taro/demo22.tsx
index 88399e432d..48f1babbcf 100644
--- a/src/packages/tabs/demos/taro/demo22.tsx
+++ b/src/packages/tabs/demos/taro/demo22.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Tabs } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 // TODO：鸿蒙支持的不好：自定义变量
 const Demo22 = () => {
@@ -11,7 +12,7 @@ const Demo22 = () => {
         onChange={(value) => {
           setTabvalue(value)
         }}
-        style={{ '--nutui-tabs-titles-font-size': '20px' }}
+        style={{ '--nutui-tabs-titles-font-size': pxTransform(20) }}
       >
         <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
@@ -22,7 +23,7 @@ const Demo22 = () => {
         onChange={(value) => {
           setTabvalue(value)
         }}
-        style={{ '--nutui-tabs-titles-font-size': '12px' }}
+        style={{ '--nutui-tabs-titles-font-size': pxTransform(12) }}
       >
         <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index ec7ba1c994..da673c31c4 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -214,7 +214,12 @@
 .nut-tabs-vertical {
   .nut-tabs-ellipsis {
     white-space: break-spaces;
+    /* #ifdef harmony */
+    padding-left: 12px;
+    /* #endif */
+    /* #ifndef harmony */
     padding-left: 6px;
+    /* #endif */
     width: 90px;
     line-height: $font-size-base;
   }