diff --git a/scripts/rn/copy-file.js b/scripts/rn/copy-file.js
index a4781df230..e4c2ececc0 100644
--- a/scripts/rn/copy-file.js
+++ b/scripts/rn/copy-file.js
@@ -32,6 +32,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'step'
 ]
 
 // copy文件并增加css引入
diff --git a/src/config.json b/src/config.json
index 98b7a88ecf..74bb3810e5 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1056,7 +1056,7 @@
           "author": "ailululu"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Step",
           "sort": 17,
           "cName": "步骤条子组件",
@@ -1067,7 +1067,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Steps",
           "type": "component",
           "cName": "步骤条",
diff --git a/src/packages/step/step.harmony.css b/src/packages/step/step.harmony.css
index d8bfb72a72..cba17c5f62 100644
--- a/src/packages/step/step.harmony.css
+++ b/src/packages/step/step.harmony.css
@@ -1,6 +1,4 @@
 .nut-step {
-  flex-grow: 0;
-  flex-shrink: 0;
   flex: 1;
   text-align: center;
   font-size: 0;
@@ -8,28 +6,31 @@
 .nut-step-head {
   position: relative;
   display: flex;
+  flex-direction: row;
   justify-content: center;
+  align-items: center;
   margin-bottom: 12px;
 }
 .nut-step-line {
   position: absolute;
-  top: calc(25px / 2);
-  left: calc(50% + (100% - 70%) / 2);
   height: 1px;
   width: 70%;
-  background: #888B94;
+  background-color: #888b94;
+  left: calc(100% - 70% / 2);
 }
 .nut-step-icon {
   position: relative;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+  border-radius: 999vmax;
   width: 25px;
   height: 25px;
   line-height: 25px;
   font-size: 12px;
-  background-color: #888B94;
-  border-color: #888B94;
+  background-color: #888b94;
+  border-color: #888b94;
   color: #ffffff;
   z-index: 1;
 }
@@ -38,17 +39,16 @@
   height: 100%;
 }
 .nut-step-icon.is-text {
-  border-radius: 50%;
+  border-radius: 999vmax;
   border-width: 1px;
   border-style: solid;
 }
 .nut-step-icon.is-icon {
-  border-radius: 50%;
+  border-radius: 999vmax;
   border-width: 1px;
   border-style: solid;
 }
 .nut-step-main {
-  padding: 0 10%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -58,113 +58,116 @@
   display: block;
   margin-bottom: 10px;
   font-size: 14px;
-  color: #1A1A1A;
+  color: #1a1a1a;
 }
 .nut-step-description {
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
   font-size: 12px;
   color: #505259;
 }
-.nut-step:last-child .nut-step-line {
-  display: none;
-}
-.nut-step.nut-step-process .nut-step-icon {
-  background-color: #FF0F23;
-  border-color: #FF0F23;
+.nut-step-process-icon {
+  background-color: #ff0f23;
+  border-color: #ff0f23;
   color: #ffffff;
 }
-.nut-step.nut-step-process .nut-step-title {
-  color: #FF0F23;
+.nut-step-process-title {
+  color: #ff0f23;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
 }
-.nut-step.nut-step-process .nut-step-description {
+.nut-step-process-inner {
+  color: #ffffff;
+}
+.nut-step-process-description {
   color: #505259;
 }
-.nut-step.nut-step-wait .nut-step-title {
-  color: #1A1A1A;
+.nut-step-finish-description {
+  color: #505259;
 }
-.nut-step.nut-step-wait .nut-step-description {
+.nut-step-finish-description {
   color: #505259;
 }
-.nut-step.nut-step-finish .nut-step-icon {
-  background-color: #ffffff;
-  border-color: #FF0F23;
-  color: #FF0F23;
+.nut-step-finish-title {
+  color: #ff0f23;
 }
-.nut-step.nut-step-finish .nut-step-line {
-  background: #FF0F23;
+.nut-step-finish-icon {
+  border-width: 1px;
+  background-color: #ffffff;
+  border-color: #ff0f23;
+  color: #ff0f23;
 }
-.nut-step.nut-step-finish .nut-step-title {
-  color: #FF0F23;
+.nut-step-finish-line {
+  background-color: #ff0f23;
 }
-.nut-step.nut-step-finish .nut-step-description {
-  color: #505259;
+.nut-step-finish-inner {
+  color: #ff0f23;
 }
-
-.nut-steps-dot .nut-step-head {
-  margin: 10px 0;
+.nut-step-wait-inner {
+  color: #ffffff;
 }
-.nut-steps-dot .nut-step-line {
-  top: 7px;
+.nut-step-wait-description {
+  color: #505259;
 }
-.nut-steps-dot .nut-step-icon {
+.nut-step-dot-icon {
   width: 6px;
   height: 6px;
   border: 2px solid #ffffff;
-  border-radius: 50%;
+  border-radius: 999vmax;
   box-sizing: content-box;
 }
-.nut-steps-dot .nut-step-wait .nut-step-icon {
-  background-color: #888B94;
+.nut-step-dot-wait-icon {
+  background-color: #888b94;
 }
-.nut-steps-dot .nut-step-finish .nut-step-icon {
+.nut-step-dot-finish-icon {
   background-color: #ffffff;
-  border-color: #FF0F23;
+  border-color: #ff0f23;
 }
-.nut-steps-dot .nut-step-process .nut-step-icon {
+.nut-step-dot-process-icon {
   position: relative;
 }
-.nut-steps-dot .nut-step-process .nut-step-icon:before {
+.nut-step-dot-process-icon::before {
   content: "";
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
-  margin-left: -7px;
-  margin-top: -7px;
+  transform: translate(-50%, -50%);
+  /* #ifdef harmony*/
+  top: 3px;
+  left: 3px;
+  /* #endif */
   width: 14px;
   height: 14px;
-  background-color: #FF0F23;
-  border-radius: 50%;
+  background-color: #ff0f23;
+  border-radius: 999vmax;
   opacity: 0.23;
 }
-
-.nut-steps-horizontal.nut-steps-dot .nut-step-line {
-  top: 50%;
-  bottom: -50%;
-}
-
-.nut-steps-vertical .nut-step {
+.nut-step-vertical {
   display: flex;
-  height: 33.34%;
+  flex-direction: row;
+  align-items: start;
+  position: relative;
 }
-.nut-steps-vertical .nut-step-line {
+.nut-step-vertical-line {
   position: absolute;
-  display: inline-block;
+  top: 150%;
   width: 1px;
-  height: 70%;
-  background: #888B94;
-  top: calc(25px + (100% - 70% - 12px) / 2);
+  height: 50px;
+  background: #888b94;
   left: calc(50% - 1px);
 }
-.nut-steps-vertical.nut-steps-dot .nut-step-line {
-  top: calc(6px + (100% - 70%) / 2);
-}
-.nut-steps-vertical .nut-step-main {
-  display: inline-block;
+.nut-step-vertical-main {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
   padding-left: 6%;
   text-align: start;
+  position: relative;
+  bottom: 10px;
+}
+.nut-step-vertical-dot-line {
+  top: 300%;
 }
 
 [dir=rtl] .nut-step-line {
diff --git a/src/packages/step/step.scss b/src/packages/step/step.scss
index 2dd2cfca02..fc279d4ebe 100644
--- a/src/packages/step/step.scss
+++ b/src/packages/step/step.scss
@@ -1,33 +1,31 @@
 .nut-step {
-  flex-grow: 0;
-  flex-shrink: 0;
   flex: 1;
   text-align: center;
   font-size: 0;
-
   &-head {
     position: relative;
     display: flex;
+    flex-direction: row;
     justify-content: center;
+    align-items: center;
     margin-bottom: $steps-base-icon-margin-bottom;
   }
-
-  // 计算方法：left = calc(50% + (100% - $steps-base-line-width) / 2)
-  // 如 width=70%时，left=65%; width=100%,left=50%;
+  // 基本样式
   &-line {
     position: absolute;
-    top: calc($steps-base-icon-height / 2);
-    left: calc(50% + (100% - $steps-base-line-width) / 2);
     height: $steps-base-line-height;
     width: $steps-base-line-width;
-    background: $steps-base-line-background;
+    background-color: $steps-base-line-background;
+    left: calc(100% - $steps-base-line-width / 2);
   }
 
   &-icon {
     position: relative;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
+    border-radius: calc($steps-base-icon-width / 2);
     width: $steps-base-icon-width;
     height: $steps-base-icon-height;
     line-height: $steps-base-icon-line-height;
@@ -43,20 +41,19 @@
     }
 
     &.is-text {
-      border-radius: 50%;
+      border-radius: calc($steps-base-icon-width / 2);
       border-width: 1px;
       border-style: solid;
     }
 
     &.is-icon {
-      border-radius: 50%;
+      border-radius: calc($steps-base-icon-width / 2);
       border-width: 1px;
       border-style: solid;
     }
   }
 
   &-main {
-    padding: 0 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -71,158 +68,126 @@
   }
 
   &-description {
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
     font-size: $steps-base-description-font-size;
     color: $steps-base-description-color;
   }
-
-  &:last-child {
-    .nut-step-line {
-      display: none;
-    }
-  }
-
-  &.nut-step-process {
-    .nut-step-icon {
+  // 3种状态
+  &-process {
+    &-icon {
       background-color: $steps-process-icon-bg-color;
       border-color: $steps-process-icon-bg-color;
       color: $steps-process-icon-color;
     }
-
-    .nut-step-title {
+    &-title {
       color: $steps-process-title-color;
       font-size: $steps-process-title-font-size;
       font-weight: $steps-process-title-font-weight;
     }
-
-    .nut-step-description {
+    &-inner {
+      color: $steps-process-icon-color;
+    }
+    &-description {
       color: $steps-process-description-color;
     }
   }
-
-  &.nut-step-wait {
-    .nut-step-title {
-      color: $steps-wait-title-color;
+  &-finish {
+    &-description {
+      color: $steps-process-description-color;
     }
-
-    .nut-step-description {
-      color: $steps-wait-description-color;
+    &-description {
+      color: $steps-finish-description-color;
     }
-  }
-
-  &.nut-step-finish {
-    .nut-step-icon {
+    &-title {
+      color: $steps-finish-icon-color;
+    }
+    &-icon {
+      border-width: 1px;
       background-color: $steps-finish-icon-bg-color;
       border-color: $steps-finish-icon-border-color;
       color: $steps-finish-icon-color;
     }
-
-    .nut-step-line {
-      background: $steps-finish-line-background;
-    }
-
-    .nut-step-title {
-      color: $steps-finish-title-color;
+    &-line {
+      background-color: $steps-finish-line-background;
     }
-
-    .nut-step-description {
-      color: $steps-finish-description-color;
+    &-inner {
+      color: $steps-finish-icon-color;
     }
   }
-}
-
-.nut-steps-dot {
-  .nut-step-head {
-    margin: $steps-dot-head-margin;
-  }
-
-  .nut-step-line {
-    top: 7px;
-  }
-
-  .nut-step-icon {
-    width: $steps-dot-icon-width;
-    height: $steps-dot-icon-height;
-    border: $steps-dot-icon-border;
-    border-radius: 50%;
-    box-sizing: content-box;
+  &-wait {
+    &-inner {
+      color: $steps-wait-icon-color;
+    }
+    &-description {
+      color: $steps-wait-description-color;
+    }
   }
-
-  .nut-step-wait {
-    .nut-step-icon {
+  // 点模式
+  &-dot {
+    &-icon {
+      width: $steps-dot-icon-width;
+      height: $steps-dot-icon-height;
+      border: $steps-dot-icon-border;
+      border-radius: calc($steps-dot-icon-width / 2);
+      box-sizing: content-box;
+    }
+    &-wait-icon {
       background-color: $steps-dot-wait-icon-bg-color;
     }
-  }
-
-  .nut-step-finish {
-    .nut-step-icon {
+    &-finish-icon {
       background-color: $steps-dot-finish-icon-bg-color;
       border-color: $steps-dot-finish-icon-border-color;
     }
-  }
-
-  .nut-step-process {
-    .nut-step-icon {
+    &-process-icon {
       position: relative;
-
-      &:before {
+      &::before {
         content: '';
         display: inline-block;
         position: absolute;
         left: 50%;
         top: 50%;
-        margin-left: -7px;
-        margin-top: -7px;
+        /* #ifndef harmony*/
+        transform: translate(-50%, -50%);
+        /* #endif */
         width: 14px;
         height: 14px;
         background-color: $steps-process-icon-before-bg-color;
-        border-radius: 50%;
+        border-radius: 7px;
         opacity: 0.23;
       }
     }
   }
-}
-
-.nut-steps-horizontal {
-  &.nut-steps-dot {
-    .nut-step-line {
-      top: 50%;
-      bottom: -50%;
-    }
-  }
-}
-
-.nut-steps-vertical {
-  .nut-step {
+  // 垂直模式
+  &-vertical {
     display: flex;
-    height: 33.34%;
-  }
-
-  .nut-step-line {
-    position: absolute;
-    display: inline-block;
-    width: 1px;
-    height: $steps-base-line-width;
-    background: $steps-base-line-background;
-    top: calc(
-      $steps-base-icon-height +
-        (100% - $steps-base-line-width - $steps-base-icon-margin-bottom) / 2
-    );
-    left: calc(50% - 1px);
-  }
-
-  &.nut-steps-dot {
-    .nut-step-line {
-      top: calc($steps-dot-icon-height + (100% - $steps-base-line-width) / 2);
+    flex-direction: row;
+    align-items: start;
+    position: relative;
+    &-line {
+      position: absolute;
+      top: 150%;
+      width: 1px;
+      height: 50px;
+      background: $steps-base-line-background;
+      left: calc(50% - 1px);
+    }
+
+    &-main {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      padding-left: 6%;
+      text-align: start;
+      position: relative;
+      bottom: 5px;
+    }
+    &-dot-line {
+      top: 300%;
     }
-  }
-
-  .nut-step-main {
-    display: inline-block;
-    padding-left: 6%;
-    text-align: start;
   }
 }
+
 [dir='rtl'] .nut-step,
 .nut-rtl .nut-step {
   &-line {
diff --git a/src/packages/step/step.taro.tsx b/src/packages/step/step.taro.tsx
index 5a3f0ec238..d4d8197a55 100644
--- a/src/packages/step/step.taro.tsx
+++ b/src/packages/step/step.taro.tsx
@@ -1,14 +1,17 @@
 import React, { FunctionComponent, ReactNode, useContext } from 'react'
 import classNames from 'classnames'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { DataContext } from '@/packages/steps/context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { harmony, rn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 export interface StepProps extends BasicComponent {
   title: ReactNode
   description: ReactNode
   value: number
   icon: ReactNode
+  lineWidth: number
 }
 
 const defaultProps = {
@@ -17,18 +20,28 @@ const defaultProps = {
   description: '',
   value: 0,
   icon: null,
+  lineWidth: 70,
 } as StepProps
 export const Step: FunctionComponent<
   Partial<StepProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 > = (props) => {
-  const { children, title, description, value, icon, className, ...restProps } =
-    {
-      ...defaultProps,
-      ...props,
-    }
+  const {
+    children,
+    title,
+    description,
+    value,
+    icon,
+    className,
+    lineWidth,
+    ...restProps
+  } = {
+    ...defaultProps,
+    ...props,
+  }
   const parent: any = useContext(DataContext)
 
-  const dot = parent.propSteps.dot
+  const { dot, direction } = parent.propSteps
+
   const getCurrentStatus = () => {
     const index = value
     if (index < +parent.propSteps.value) return 'finish'
@@ -39,10 +52,12 @@ export const Step: FunctionComponent<
   }
 
   const classPrefix = `nut-step`
+  const directionClass = direction === 'vertical' ? 'vertical' : ''
   const classes = classNames(
     classPrefix,
+    `${classPrefix}-${getCurrentStatus()}`,
     {
-      [`${classPrefix}-${getCurrentStatus()}`]: true,
+      [`${classPrefix}-vertical`]: direction === 'vertical',
     },
     className
   )
@@ -54,25 +69,94 @@ export const Step: FunctionComponent<
     if (!dot && !icon) {
       return `${classPrefix}-icon is-text`
     }
-    return `${classPrefix}-icon`
+    return `${classPrefix}-icon ${classPrefix}-dot-icon`
+  }
+  const renderLineStyle = () => {
+    const isLastItem =
+      parent.propSteps.children[parent.propSteps.children.length - 1].props
+        .value === value
+    const leftPosition = 100 - lineWidth / 2
+    if (isLastItem) {
+      return { display: 'none' }
+    }
+    if (harmony()) {
+      if (direction === 'vertical') {
+        return dot
+          ? {
+              left: pxTransform(2),
+            }
+          : {
+              left: '50%',
+            }
+      }
+      return {
+        left: `${leftPosition}%`,
+        top: pxTransform(dot ? 3 : 12.5),
+      }
+    }
+    if (rn()) {
+      return direction === 'vertical'
+        ? {
+            left: '50%',
+            top: dot ? '30%' : '40%',
+          }
+        : {
+            left: `${leftPosition}%`,
+          }
+    }
   }
   return (
-    <div className={classes} {...restProps} onClick={handleClickStep}>
-      <View className="nut-step-head">
-        <View className="nut-step-line" />
-        <View className={renderIconClass()}>
-          {icon || (!dot && <span className="nut-step-inner">{value}</span>)}
+    <View className={classes} {...(restProps as any)} onClick={handleClickStep}>
+      <View className={`${classPrefix}-head`}>
+        <View
+          className={classNames(
+            renderIconClass(),
+            `${classPrefix}-${getCurrentStatus()}-icon`,
+            {
+              [`${classPrefix}-dot-${getCurrentStatus()}-icon`]: dot,
+            }
+          )}
+        >
+          {icon ||
+            (!dot && (
+              <Text className={`${classPrefix}-${getCurrentStatus()}-inner`}>
+                {value}
+              </Text>
+            ))}
         </View>
+        <View
+          className={classNames(
+            `${classPrefix}-line`,
+            {
+              [`${classPrefix}-vertical-line`]: direction === 'vertical',
+              [`${classPrefix}-${directionClass}-dot-line`]: dot,
+            },
+            `${classPrefix}-${getCurrentStatus()}-line`
+          )}
+          style={renderLineStyle()}
+        />
       </View>
       {(title || description) && (
-        <View className="nut-step-main">
-          <span className="nut-step-title">{title}</span>
+        <View
+          className={classNames(`${classPrefix}-main`, {
+            [`${classPrefix}-${directionClass}-main`]: direction === 'vertical',
+          })}
+        >
+          <Text
+            className={`${classPrefix}-title ${classPrefix}-${getCurrentStatus()}-title`}
+          >
+            {title}
+          </Text>
           {description && (
-            <span className="nut-step-description">{description}</span>
+            <Text
+              className={`${classPrefix}-description ${classPrefix}-${getCurrentStatus()}-description`}
+            >
+              {description}
+            </Text>
           )}
         </View>
       )}
-    </div>
+    </View>
   )
 }
 
diff --git a/src/packages/steps/demo.taro.tsx b/src/packages/steps/demo.taro.tsx
index 9347eaae0a..84dc27f4e9 100644
--- a/src/packages/steps/demo.taro.tsx
+++ b/src/packages/steps/demo.taro.tsx
@@ -12,6 +12,7 @@ import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
 import Demo9 from './demos/taro/demo9'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const StepsDemo = () => {
   const [translated] = useTranslate({
@@ -66,17 +67,19 @@ const StepsDemo = () => {
         <View className="h2">{translated.info}</View>
         <Demo3 />
 
-        <View className="h2">{translated.custom}</View>
-        <Demo4 />
+        {!harmonyAndRn() && (
+          <>
+            <View className="h2">{translated.custom}</View>
+            <Demo4 />
 
-        <View className="h2">{translated.customDot}</View>
-        <Demo5 />
-
-        <View className="h2">{translated.customBoth}</View>
-        <Demo6 />
-
-        <View className="h2">{translated.customIcon}</View>
-        <Demo7 />
+            <View className="h2">{translated.customDot}</View>
+            <Demo5 />
+            <View className="h2">{translated.customBoth}</View>
+            <Demo6 />
+            <View className="h2">{translated.customIcon}</View>
+            <Demo7 />
+          </>
+        )}
 
         <View className="h2">{translated.vertical}</View>
         <Demo8 />
diff --git a/src/packages/steps/demos/taro/demo1.tsx b/src/packages/steps/demos/taro/demo1.tsx
index 57e1658214..e6f4d5b101 100644
--- a/src/packages/steps/demos/taro/demo1.tsx
+++ b/src/packages/steps/demos/taro/demo1.tsx
@@ -1,13 +1,9 @@
 import React, { useState } from 'react'
-import { View } from '@tarojs/components'
 import { Steps, Step, Button } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
   const [val, setVal] = useState(1)
-  const handleStep = () => {
-    const newVal = (val % 3) + 1
-    setVal(newVal)
-  }
   return (
     <>
       <Steps value={val}>
@@ -15,11 +11,14 @@ const Demo1 = () => {
         <Step value={2} title="步骤二" />
         <Step value={3} title="步骤三" />
       </Steps>
-      <View style={{ marginTop: '10px', textAlign: 'center' }}>
-        <Button type="danger" onClick={() => handleStep()}>
-          下一步
-        </Button>
-      </View>
+
+      <Button
+        type="danger"
+        onClick={() => setVal((val % 3) + 1)}
+        style={{ marginLeft: pxTransform(30) }}
+      >
+        Next
+      </Button>
     </>
   )
 }
diff --git a/src/packages/steps/demos/taro/demo2.tsx b/src/packages/steps/demos/taro/demo2.tsx
index 6abe2f51cf..7181dcfc21 100644
--- a/src/packages/steps/demos/taro/demo2.tsx
+++ b/src/packages/steps/demos/taro/demo2.tsx
@@ -1,28 +1,23 @@
 import React, { useState } from 'react'
-import { View } from '@tarojs/components'
 import { Steps, Step, Button } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
   const [val, setVal] = useState(1)
-  const handleStep = () => {
-    const newVal = (val % 3) + 1
-    setVal(newVal)
-  }
-  const handleClickStep = (value: number) => {
-    console.log(value)
-  }
   return (
     <>
-      <Steps value={val} dot onStepClick={handleClickStep}>
+      <Steps value={val} dot onStepClick={(v) => setVal(v)}>
         <Step value={1} />
         <Step value={2} />
         <Step value={3} />
       </Steps>
-      <View style={{ marginTop: '10px', textAlign: 'center' }}>
-        <Button type="danger" onClick={() => handleStep()}>
-          下一步
-        </Button>
-      </View>
+      <Button
+        type="danger"
+        onClick={() => setVal((val % 3) + 1)}
+        style={{ marginLeft: pxTransform(30) }}
+      >
+        Next
+      </Button>
     </>
   )
 }
diff --git a/src/packages/steps/demos/taro/demo3.tsx b/src/packages/steps/demos/taro/demo3.tsx
index efbd5feaa6..8966772f1c 100644
--- a/src/packages/steps/demos/taro/demo3.tsx
+++ b/src/packages/steps/demos/taro/demo3.tsx
@@ -1,13 +1,9 @@
 import React, { useState } from 'react'
-import { View } from '@tarojs/components'
 import { Steps, Step, Button } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   const [val, setVal] = useState(1)
-  const handleStep = () => {
-    const newVal = (val % 3) + 1
-    setVal(newVal)
-  }
   return (
     <>
       <Steps value={val}>
@@ -15,11 +11,13 @@ const Demo3 = () => {
         <Step value={2} title="步骤二" description="步骤描述" />
         <Step value={3} title="步骤三" description="步骤描述" />
       </Steps>
-      <View style={{ marginTop: '10px', textAlign: 'center' }}>
-        <Button type="danger" onClick={() => handleStep()}>
-          下一步
-        </Button>
-      </View>
+      <Button
+        type="danger"
+        onClick={() => setVal((val % 3) + 1)}
+        style={{ marginLeft: pxTransform(30), marginTop: pxTransform(10) }}
+      >
+        Next
+      </Button>
     </>
   )
 }
diff --git a/src/packages/steps/demos/taro/demo4.tsx b/src/packages/steps/demos/taro/demo4.tsx
index 83141e6160..f75f5b6a8a 100644
--- a/src/packages/steps/demos/taro/demo4.tsx
+++ b/src/packages/steps/demos/taro/demo4.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { View } from '@tarojs/components'
 import { Steps, Step, Button, ConfigProvider } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const customTheme = {
   nutuiStepsBaseLineWidth: '70%',
@@ -16,10 +16,6 @@ const customTheme = {
 
 const Demo4 = () => {
   const [val, setVal] = useState(1)
-  const handleStep = () => {
-    const newVal = (val % 3) + 1
-    setVal(newVal)
-  }
   return (
     <>
       <ConfigProvider theme={customTheme}>
@@ -29,11 +25,14 @@ const Demo4 = () => {
           <Step value={3} title="步骤三" description="步骤描述" />
         </Steps>
       </ConfigProvider>
-      <View style={{ marginTop: '10px', textAlign: 'center' }}>
-        <Button type="danger" onClick={() => handleStep()}>
-          下一步
-        </Button>
-      </View>
+
+      <Button
+        type="danger"
+        onClick={() => setVal((val % 3) + 1)}
+        style={{ marginLeft: pxTransform(30), marginTop: pxTransform(10) }}
+      >
+        Next
+      </Button>
     </>
   )
 }
diff --git a/src/packages/steps/demos/taro/demo5.tsx b/src/packages/steps/demos/taro/demo5.tsx
index 2e67175886..1a7378c633 100644
--- a/src/packages/steps/demos/taro/demo5.tsx
+++ b/src/packages/steps/demos/taro/demo5.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { View } from '@tarojs/components'
 import { Steps, Step, Button, ConfigProvider } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const customTheme = {
   nutuiStepsBaseLineWidth: '30%',
@@ -8,10 +8,6 @@ const customTheme = {
 
 const Demo5 = () => {
   const [val, setVal] = useState(1)
-  const handleStep = () => {
-    const newVal = (val % 3) + 1
-    setVal(newVal)
-  }
   return (
     <>
       <ConfigProvider theme={customTheme}>
@@ -21,11 +17,13 @@ const Demo5 = () => {
           <Step value={3} />
         </Steps>
       </ConfigProvider>
-      <View style={{ marginTop: '10px', textAlign: 'center' }}>
-        <Button type="danger" onClick={() => handleStep()}>
-          下一步
-        </Button>
-      </View>
+      <Button
+        type="danger"
+        onClick={() => setVal((val % 3) + 1)}
+        style={{ marginLeft: pxTransform(30) }}
+      >
+        Next
+      </Button>
     </>
   )
 }
diff --git a/src/packages/steps/demos/taro/demo6.tsx b/src/packages/steps/demos/taro/demo6.tsx
index 9585f0d8a8..a4a7ea4f3c 100644
--- a/src/packages/steps/demos/taro/demo6.tsx
+++ b/src/packages/steps/demos/taro/demo6.tsx
@@ -8,7 +8,7 @@ const customTheme = {
   nutuiStepsDotIconBorder: '0',
   nutuiStepsBaseIconWidth: '6px',
   nutuiStepsBaseIconHeight: '6px',
-  nutuiStepsBaseLineBackground: `#ddd`,
+  nutuiStepsBaseLineBackground: `black`,
   nutuiStepsFinishIconBgColor: 'black',
   nutuiStepsFinishIconColor: 'black',
   nutuiStepsProcessIconBgColor: 'white',
diff --git a/src/packages/steps/demos/taro/demo8.tsx b/src/packages/steps/demos/taro/demo8.tsx
index 2978808799..d36b40b3f1 100644
--- a/src/packages/steps/demos/taro/demo8.tsx
+++ b/src/packages/steps/demos/taro/demo8.tsx
@@ -1,10 +1,18 @@
 import React from 'react'
 import { View } from '@tarojs/components'
 import { Steps, Step } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo8 = () => {
   return (
-    <View style={{ height: '300px', padding: '15px 30px' }}>
+    <View
+      style={{
+        height: pxTransform(300),
+        paddingTop: pxTransform(15),
+        paddingLeft: pxTransform(30),
+        paddingRight: pxTransform(30),
+      }}
+    >
       <Steps direction="vertical" value={2}>
         <Step
           value={1}
diff --git a/src/packages/steps/demos/taro/demo9.tsx b/src/packages/steps/demos/taro/demo9.tsx
index d63606e05a..09186a878c 100644
--- a/src/packages/steps/demos/taro/demo9.tsx
+++ b/src/packages/steps/demos/taro/demo9.tsx
@@ -1,10 +1,18 @@
 import React from 'react'
-import { View } from '@tarojs/components'
+import { Text, View } from '@tarojs/components'
 import { Steps, Step } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo9 = () => {
   return (
-    <View style={{ height: '300px', padding: '15px 30px' }}>
+    <View
+      style={{
+        height: pxTransform(300),
+        paddingTop: pxTransform(15),
+        paddingLeft: pxTransform(30),
+        paddingRight: pxTransform(30),
+      }}
+    >
       <Steps direction="vertical" dot value={2}>
         <Step
           value={1}
@@ -17,8 +25,9 @@ const Demo9 = () => {
           title="未开始"
           description={
             <>
-              <p>收货地址为：</p>
-              <p>北京市经济技术开发区科创十一街18号院京东大厦</p>
+              <Text>
+                收货地址为： 北京市经济技术开发区科创十一街18号院京东大厦
+              </Text>
             </>
           }
         />
diff --git a/src/packages/steps/steps.harmony.css b/src/packages/steps/steps.harmony.css
index bb64553555..fb6402d59f 100644
--- a/src/packages/steps/steps.harmony.css
+++ b/src/packages/steps/steps.harmony.css
@@ -1,8 +1,206 @@
+.nut-step {
+  flex: 1;
+  text-align: center;
+  font-size: 0;
+}
+.nut-step-head {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.nut-step-line {
+  position: absolute;
+  height: 1px;
+  width: 70%;
+  background-color: #888b94;
+  left: calc(100% - 70% / 2);
+}
+.nut-step-icon {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999vmax;
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  background-color: #888b94;
+  border-color: #888b94;
+  color: #ffffff;
+  z-index: 1;
+}
+.nut-step-icon .nut-icon {
+  width: 100%;
+  height: 100%;
+}
+.nut-step-icon.is-text {
+  border-radius: 999vmax;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-icon.is-icon {
+  border-radius: 999vmax;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-step-title {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #1a1a1a;
+}
+.nut-step-description {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: #505259;
+}
+.nut-step-process-icon {
+  background-color: #ff0f23;
+  border-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-step-process-title {
+  color: #ff0f23;
+  font-size: 14px;
+  font-weight: 600;
+}
+.nut-step-process-inner {
+  color: #ffffff;
+}
+.nut-step-process-description {
+  color: #505259;
+}
+.nut-step-finish-description {
+  color: #505259;
+}
+.nut-step-finish-description {
+  color: #505259;
+}
+.nut-step-finish-title {
+  color: #ff0f23;
+}
+.nut-step-finish-icon {
+  border-width: 1px;
+  background-color: #ffffff;
+  border-color: #ff0f23;
+  color: #ff0f23;
+}
+.nut-step-finish-line {
+  background-color: #ff0f23;
+}
+.nut-step-finish-inner {
+  color: #ff0f23;
+}
+.nut-step-wait-inner {
+  color: #ffffff;
+}
+.nut-step-wait-description {
+  color: #505259;
+}
+.nut-step-dot-icon {
+  width: 6px;
+  height: 6px;
+  border: 2px solid #ffffff;
+  border-radius: 999vmax;
+  box-sizing: content-box;
+}
+.nut-step-dot-wait-icon {
+  background-color: #888b94;
+}
+.nut-step-dot-finish-icon {
+  background-color: #ffffff;
+  border-color: #ff0f23;
+}
+.nut-step-dot-process-icon {
+  position: relative;
+}
+.nut-step-dot-process-icon::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  /* #ifdef harmony*/
+  top: 3px;
+  left: 3px;
+  /* #endif */
+  width: 14px;
+  height: 14px;
+  background-color: #ff0f23;
+  border-radius: 999vmax;
+  opacity: 0.23;
+}
+.nut-step-vertical {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+}
+.nut-step-vertical-line {
+  position: absolute;
+  width: 1px;
+  height: 40px;
+  background: #888b94;
+}
+.nut-step-vertical-main {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding-left: 6%;
+  text-align: start;
+}
+.nut-step-vertical-dot-line {
+  top: 30px;
+}
+
+[dir=rtl] .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+.nut-rtl .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - 70%) / 2);
+}
+
+[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,
+.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before {
+  left: auto;
+  right: 50%;
+  margin-left: 0;
+  margin-right: -7px;
+}
+
+[dir=rtl] .nut-steps-vertical .nut-step-line,
+.nut-rtl .nut-steps-vertical .nut-step-line {
+  left: auto;
+  right: calc(50% - 1px);
+}
+[dir=rtl] .nut-steps-vertical .nut-step-main,
+.nut-rtl .nut-steps-vertical .nut-step-main {
+  padding-left: 0;
+  padding-right: 6%;
+}
+
 .nut-steps {
   display: flex;
+  flex-direction: row;
 }
 
 .nut-steps-vertical {
+  display: flex;
   height: 100%;
-  flex-flow: column;
+  flex-direction: column;
 }
\ No newline at end of file
diff --git a/src/packages/steps/steps.scss b/src/packages/steps/steps.scss
index 865cb7d1b9..e12197774d 100644
--- a/src/packages/steps/steps.scss
+++ b/src/packages/steps/steps.scss
@@ -2,9 +2,11 @@
 
 .nut-steps {
   display: flex;
+  flex-direction: row;
 }
 
 .nut-steps-vertical {
+  display: flex;
   height: 100%;
-  flex-flow: column;
+  flex-direction: column;
 }
diff --git a/src/packages/steps/steps.taro.tsx b/src/packages/steps/steps.taro.tsx
index e57debb2ca..12dbc12e18 100644
--- a/src/packages/steps/steps.taro.tsx
+++ b/src/packages/steps/steps.taro.tsx
@@ -1,7 +1,9 @@
 import React, { FunctionComponent } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import { DataContext } from './context'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 export interface StepsProps extends BasicComponent {
   value: number
@@ -40,17 +42,31 @@ export const Steps: FunctionComponent<
     classPrefix,
     {
       [`${classPrefix}-${direction}`]: true,
-      [`${classPrefix}-dot`]: !!dot,
+      [`${classPrefix}-dot`]: dot,
     },
     className
   )
-  return (
-    <DataContext.Provider value={parentSteps}>
-      <div className={classes} {...restProps}>
-        {children}
-      </div>
-    </DataContext.Provider>
-  )
+  const renderContent = () => {
+    if (harmonyAndRn()) {
+      return (
+        <View>
+          <DataContext.Provider value={parentSteps}>
+            <View className={classes} {...(restProps as any)}>
+              {children}
+            </View>
+          </DataContext.Provider>
+        </View>
+      )
+    }
+    return (
+      <DataContext.Provider value={parentSteps}>
+        <View className={classes} {...(restProps as any)}>
+          {children}
+        </View>
+      </DataContext.Provider>
+    )
+  }
+  return <>{renderContent()}</>
 }
 
 Steps.displayName = 'NutSteps'