diff --git a/src/config.json b/src/config.json
index 98b7a88ecf..50337b0b7c 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1207,7 +1207,7 @@
           "author": "zhaoqian16"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "TrendArrow",
           "type": "component",
           "cName": "趋势箭头",
diff --git a/src/packages/trendarrow/trendarrow.harmony.css b/src/packages/trendarrow/trendarrow.harmony.css
index c9dbdd3969..82584e5490 100644
--- a/src/packages/trendarrow/trendarrow.harmony.css
+++ b/src/packages/trendarrow/trendarrow.harmony.css
@@ -1,7 +1,8 @@
 .nut-trendarrow {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
   align-items: center;
-  color: #1A1A1A;
+  color: #1a1a1a;
   font-size: 14px;
 }
 .nut-trendarrow-icon-before {
diff --git a/src/packages/trendarrow/trendarrow.scss b/src/packages/trendarrow/trendarrow.scss
index 6c613fa574..a4781498a8 100644
--- a/src/packages/trendarrow/trendarrow.scss
+++ b/src/packages/trendarrow/trendarrow.scss
@@ -1,5 +1,6 @@
 .nut-trendarrow {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
   align-items: center;
   color: $color-title;
   font-size: $trendarrow-font-size;
diff --git a/src/packages/trendarrow/trendarrow.taro.tsx b/src/packages/trendarrow/trendarrow.taro.tsx
index 5367083266..f9afd3eeeb 100644
--- a/src/packages/trendarrow/trendarrow.taro.tsx
+++ b/src/packages/trendarrow/trendarrow.taro.tsx
@@ -1,6 +1,8 @@
 import React, { FunctionComponent, useRef } from 'react'
 import { TriangleDown, TriangleUp } from '@nutui/icons-react-taro'
+import { View, Text } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { harmony } from '@/utils/platform-taro'
 
 export interface TrendArrowProps extends BasicComponent {
   value: number
@@ -24,8 +26,8 @@ const defaultProps = {
   left: false,
   sync: true,
   color: '#333',
-  riseColor: 'var(--nutui-brand-6)',
-  dropColor: 'var(--nutui-secondary-1)',
+  riseColor: harmony() ? '#ff0f23' : 'var(--nutui-brand-6)',
+  dropColor: harmony() ? '#14cc33' : 'var(--nutui-secondary-1)',
   riseIcon: null,
   dropIcon: null,
 } as TrendArrowProps
@@ -96,16 +98,20 @@ export const TrendArrow: FunctionComponent<
   const renderContent = (left: boolean) => {
     const classNameSuffix = !left ? 'icon-after' : 'icon-before'
     return (
-      <span
+      <Text
         className={`${classPrefix}-${classNameSuffix} ${classPrefix}-value`}
         style={calcStyle}
       >
         {calcRate}
-      </span>
+      </Text>
     )
   }
   return (
-    <div className={`${classPrefix} ${className}`} style={style} {...rest}>
+    <View
+      className={`${classPrefix} ${className}`}
+      style={style}
+      {...(rest as any)}
+    >
       {!left && renderContent(!left)}
       {Number(value) !== 0 && (
         <>
@@ -117,7 +123,7 @@ export const TrendArrow: FunctionComponent<
         </>
       )}
       {left && renderContent(!left)}
-    </div>
+    </View>
   )
 }