diff --git a/packages/nutui-harmony/build-profile.json5 b/packages/nutui-harmony/build-profile.json5
index 6573dfaef6..2327375a1c 100644
--- a/packages/nutui-harmony/build-profile.json5
+++ b/packages/nutui-harmony/build-profile.json5
@@ -1,33 +1,35 @@
 {
-  app: {
-    signingConfigs: [],
-    products: [
+  "app": {
+    "signingConfigs": [],
+    "products": [
       {
-        name: 'default',
-        signingConfig: 'default',
-        compatibleSdkVersion: '4.1.0(11)',
-        runtimeOS: 'HarmonyOS',
-      },
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "4.1.0(11)",
+        "runtimeOS": "HarmonyOS"
+      }
     ],
-    buildModeSet: [
+    "buildModeSet": [
       {
-        name: 'debug',
+        "name": "debug"
       },
       {
-        name: 'release',
-      },
-    ],
+        "name": "release"
+      }
+    ]
   },
-  modules: [
+  "modules": [
     {
-      name: 'default',
-      srcPath: './entry',
-      targets: [
+      "name": "default",
+      "srcPath": "./entry",
+      "targets": [
         {
-          name: 'default',
-          applyToProducts: ['default'],
-        },
-      ],
-    },
-  ],
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
 }
diff --git a/src/packages/countdown/countdown.harmony.css b/src/packages/countdown/countdown.harmony.css
index 39283cd48e..57b77bbe79 100644
--- a/src/packages/countdown/countdown.harmony.css
+++ b/src/packages/countdown/countdown.harmony.css
@@ -1,5 +1,57 @@
 .nut-countdown {
   display: flex;
-  color: #1A1A1A;
-  font-size: 14px;
+  flex-direction: row;
+  align-items: center;
+  color: #ff0f23;
+  font-size: 10px;
+}
+.nut-countdown-number-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-unit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 14px;
+  font-weight: 400;
+  font-size: 10px;
+}
+.nut-countdown-number {
+  min-width: 20px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number-primary {
+  min-width: 20px;
+  padding: 0 1px;
+  border-radius: 2px;
+  margin: 0 2px;
+}
+.nut-countdown-number {
+  border: 1px solid #ffebf1;
+  background-color: transparent;
+  color: #ff0f23;
+  text-align: center;
+}
+.nut-countdown-number-primary {
+  border: 1px solid #ff0f23;
+  background-color: #ff0f23;
+  color: #ffffff;
+}
+.nut-countdown-unit {
+  color: #ff0f23;
 }
\ No newline at end of file
diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss
index 78a68bd85f..8591c93949 100644
--- a/src/packages/countdown/countdown.scss
+++ b/src/packages/countdown/countdown.scss
@@ -1,5 +1,38 @@
 .nut-countdown {
   display: $countdown-display;
+  flex-direction: row;
+  align-items: center;
   color: $countdown-color;
   font-size: $countdown-font-size;
+  &-number-primary,
+  &-number,
+  &-unit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $countdown-height;
+    font-weight: $coutdown-font-weight;
+    font-size: $countdown-font-size;
+  }
+  &-number,
+  &-number-primary {
+    min-width: $countdown-width;
+    padding: $countdown-number-padding;
+    border-radius: $countdown-number-border-radius;
+    margin: $countdown-number-margin;
+  }
+  &-number {
+    border: 1px solid $countdown-number-border-color;
+    background-color: $countdown-number-background-color;
+    color: $countdown-number-color;
+    text-align: center;
+  }
+  &-number-primary {
+    border: 1px solid $countdown-number-primary-border-color;
+    background-color: $countdown-number-primary-background-color;
+    color: $countdown-number-primary-color;
+  }
+  &-unit {
+    color: $color-primary;
+  }
 }
diff --git a/src/packages/countdown/countdown.taro.tsx b/src/packages/countdown/countdown.taro.tsx
index 4bd60f0eef..f62ca76715 100644
--- a/src/packages/countdown/countdown.taro.tsx
+++ b/src/packages/countdown/countdown.taro.tsx
@@ -7,12 +7,20 @@ import React, {
   useImperativeHandle,
 } from 'react'
 import { View } from '@tarojs/components'
-import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { padZero } from '@/utils/pad-zero'
-import { harmonyAndRn } from '@/utils/platform-taro'
+import { harmonyAndRn, web } from '@/utils/platform-taro'
 
+export interface CountDownTimeProps {
+  d: number
+  h: number
+  m: number
+  s: number
+  ms: number
+}
+export type CountDownType = 'default' | 'primary'
 export interface CountDownProps extends BasicComponent {
+  type: CountDownType
   paused: boolean
   startTime: number
   endTime: number
@@ -31,6 +39,7 @@ export interface CountDownProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  type: 'default',
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
@@ -46,8 +55,8 @@ const InternalCountDown: ForwardRefRenderFunction<
   unknown,
   Partial<CountDownProps>
 > = (props, ref) => {
-  const { locale } = useConfig()
   const {
+    type,
     paused,
     startTime,
     endTime,
@@ -94,7 +103,7 @@ const InternalCountDown: ForwardRefRenderFunction<
       stateRef.current.handleEndTime = Date.now() + Number(remainingTime)
     } else {
       stateRef.current.handleEndTime = endTime
-      if (!harmonyAndRn()) {
+      if (web()) {
         stateRef.current.diffTime = Date.now() - getTimeStamp(startTime) // 时间差
       }
     }
@@ -127,7 +136,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     })
   }
 
-  // 将倒计时剩余时间格式化   参数： t  时间戳  type custom 自定义类型
+  // 将倒计时剩余时间格式化   参数：t时间戳 type custom 自定义类型
   const formatRemainTime = (t: number, type?: string) => {
     const ts = t
     const rest = {
@@ -152,13 +161,7 @@ const InternalCountDown: ForwardRefRenderFunction<
     return type === 'custom' ? rest : parseFormat({ ...rest })
   }
 
-  const parseFormat = (time: {
-    d: number
-    h: number
-    m: number
-    s: number
-    ms: number
-  }) => {
+  const parseFormat = (time: CountDownTimeProps) => {
     const { d } = time
     let { h, m, s, ms } = time
     let formatCache = format
@@ -198,8 +201,16 @@ const InternalCountDown: ForwardRefRenderFunction<
         formatCache = formatCache.replace('SS', msC.slice(0, 1))
       }
     }
+    formatCache = formatCache.replace(
+      /(\d+)/g,
+      type === 'primary'
+        ? `<View class="nut-countdown-number-primary">$1</View>`
+        : `<View class="nut-countdown-number">$1</View>`
+    )
+
     return formatCache
   }
+
   // 暂定
   const pause = () => {
     cancelAnimationFrame(stateRef.current.timer)
@@ -286,25 +297,87 @@ const InternalCountDown: ForwardRefRenderFunction<
     return formatRemainTime(stateRef.current.restTime)
   })()
 
+  const getUnit = (unit: string) => {
+    const formatArr = format.split(/(DD|HH|mm|ss|S)/)
+    const index = formatArr.indexOf(unit)
+    return index > -1 ? formatArr[index + 1] : ':'
+  }
+
+  const renderTimeItem = (
+    formatUnit: string,
+    time: number | string,
+    unit = ''
+  ) => {
+    return (
+      <>
+        {format.includes(formatUnit) ? (
+          <>
+            <View
+              className={`${classPrefix}-number${type === 'primary' ? '-primary' : ''}`}
+            >
+              {padZero(time)}
+            </View>
+            {unit ? (
+              <View className={`${classPrefix}-unit`}>{getUnit(unit)}</View>
+            ) : null}
+          </>
+        ) : null}
+      </>
+    )
+  }
+
+  const renderTaroTime = () => {
+    const formatCache = formatRemainTime(stateRef.current.restTime, 'custom')
+    const { d, h, m, s, ms } = formatCache as CountDownTimeProps
+    const digit = format.match(/S/g)?.length
+    // format可能是DD天HH时mm分SSS秒或者DD天HH时mm分S秒或是DD：HH：mm：ss
+
+    return (
+      <>
+        {renderTimeItem('DD', d, 'DD')}
+        {renderTimeItem('HH', h, 'HH')}
+        {renderTimeItem('mm', m, 'mm')}
+        {renderTimeItem('ss', s)}
+        {(format.includes('S') || getUnit('ss') !== ':') && (
+          <>
+            <View className={`${classPrefix}-unit`}>{getUnit('ss')}</View>
+          </>
+        )}
+        {renderTimeItem(
+          'S',
+          padZero(ms, 3)
+            .toString()
+            .slice(0, digit || 2)
+        )}
+      </>
+    )
+  }
+
   return (
-    <View
-      className={`${classPrefix} ${className}`}
-      style={{ ...style }}
-      {...rest}
-    >
+    <>
       {children || (
-        <View
-          className={`${classPrefix}-block`}
-          // eslint-disable-next-line react/no-danger
-          // TODO:RN和鸿蒙暂时不支持dangerouslySetInnerHTML
-          //   dangerouslySetInnerHTML={{
-          //     __html: `${renderTime}`,
-          //   }}
-        >
-          {renderTime as any}
-        </View>
+        <>
+          {!harmonyAndRn() ? (
+            <View
+              className={`${classPrefix} ${className}`}
+              style={{ ...style }}
+              {...rest}
+              dangerouslySetInnerHTML={{
+                __html: `${renderTime}`,
+              }}
+            />
+          ) : (
+            <View
+              className={`${classPrefix} ${className}`}
+              style={{ ...style }}
+              {...rest}
+            >
+              {renderTaroTime()}
+            </View>
+          )}
+        </>
       )}
-    </View>
+    </>
   )
 }
 
diff --git a/src/packages/countdown/countdown.tsx b/src/packages/countdown/countdown.tsx
index c9a4184fa0..28ec1959ca 100644
--- a/src/packages/countdown/countdown.tsx
+++ b/src/packages/countdown/countdown.tsx
@@ -6,11 +6,13 @@ import React, {
   ForwardRefRenderFunction,
   useImperativeHandle,
 } from 'react'
-import { useConfig } from '@/packages/configprovider'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { padZero } from '@/utils/pad-zero'
 
+export type CountDownType = 'default' | 'primary'
+
 export interface CountDownProps extends BasicComponent {
+  type: CountDownType
   paused: boolean
   startTime: number
   endTime: number
@@ -29,6 +31,7 @@ export interface CountDownProps extends BasicComponent {
 
 const defaultProps = {
   ...ComponentDefaults,
+  type: 'default',
   paused: false,
   startTime: Date.now(),
   endTime: Date.now(),
@@ -44,8 +47,8 @@ const InternalCountDown: ForwardRefRenderFunction<
   unknown,
   Partial<CountDownProps>
 > = (props, ref) => {
-  const { locale } = useConfig()
   const {
+    type,
     paused,
     startTime,
     endTime,
@@ -194,6 +197,13 @@ const InternalCountDown: ForwardRefRenderFunction<
         formatCache = formatCache.replace('SS', msC.slice(0, 1))
       }
     }
+    formatCache = formatCache.replace(
+      /(\d+)/g,
+      type === 'primary'
+        ? `<span class="nut-countdown-number-primary">$1</span>`
+        : `<span class="nut-countdown-number">$1</span>`
+    )
+
     return formatCache
   }
 
@@ -284,21 +294,18 @@ const InternalCountDown: ForwardRefRenderFunction<
   })()
 
   return (
-    <div
-      className={`${classPrefix} ${className}`}
-      style={{ ...style }}
-      {...rest}
-    >
+    <>
       {children || (
         <div
-          className={`${classPrefix}-block`}
-          // eslint-disable-next-line react/no-danger
+          className={`${classPrefix} ${className}`}
+          style={{ ...style }}
+          {...rest}
           dangerouslySetInnerHTML={{
             __html: `${renderTime}`,
           }}
         />
       )}
-    </div>
+    </>
   )
 }
 
diff --git a/src/packages/countdown/demos/h5/demo1.tsx b/src/packages/countdown/demos/h5/demo1.tsx
index 48ab03b0a1..2b216cb815 100644
--- a/src/packages/countdown/demos/h5/demo1.tsx
+++ b/src/packages/countdown/demos/h5/demo1.tsx
@@ -9,9 +9,18 @@ const Demo1 = () => {
     console.log('countdown: ended.')
   }
   return (
-    <Cell>
-      <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
-    </Cell>
+    <>
+      <Cell>
+        <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="primary"
+          onEnd={onEnd}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo1
diff --git a/src/packages/countdown/demos/h5/demo8.tsx b/src/packages/countdown/demos/h5/demo8.tsx
index 271ff4bbd0..642b201a77 100644
--- a/src/packages/countdown/demos/h5/demo8.tsx
+++ b/src/packages/countdown/demos/h5/demo8.tsx
@@ -7,14 +7,14 @@ const partItemStyle = {
   alignItems: 'center',
   justifyContent: 'center',
   width: '20px',
-  height: '25px',
-  background: '#e8220e',
+  height: '20px',
+  background: '#fa2c19',
   color: '#fff',
-  fontSize: '14px',
-  borderRadius: '6px',
+  fontSize: '12px',
+  borderRadius: '4px',
 }
 const partItemSymbolStyle = {
-  margin: '0 5px',
+  margin: '0 2px',
 }
 const Demo8 = () => {
   const onUpdate = (v: any) => {
@@ -32,18 +32,17 @@ const Demo8 = () => {
 
   return (
     <Cell>
-      <span>
-        <CountDown endTime={stateRef.current.endTime} onUpdate={onUpdate}>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div style={partItemSymbolStyle}>{resetTime.d}天</div>
-            <div style={partItemStyle}>{resetTime.h}</div>
-            <span style={partItemSymbolStyle}>:</span>
-            <div style={partItemStyle}>{resetTime.m}</div>
-            <span style={partItemSymbolStyle}>:</span>
-            <div style={partItemStyle}>{resetTime.s}</div>
-          </div>
-        </CountDown>
-      </span>
+      <CountDown endTime={stateRef.current.endTime} onUpdate={onUpdate}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div style={partItemStyle}>{resetTime.d}</div>
+          <span style={partItemSymbolStyle}>天</span>
+          <div style={partItemStyle}>{resetTime.h}</div>
+          <span style={partItemSymbolStyle}>:</span>
+          <div style={partItemStyle}>{resetTime.m}</div>
+          <span style={partItemSymbolStyle}>:</span>
+          <div style={partItemStyle}>{resetTime.s}</div>
+        </div>
+      </CountDown>
     </Cell>
   )
 }
diff --git a/src/packages/countdown/demos/taro/demo1.tsx b/src/packages/countdown/demos/taro/demo1.tsx
index 7567da0b0e..8d1e389c29 100644
--- a/src/packages/countdown/demos/taro/demo1.tsx
+++ b/src/packages/countdown/demos/taro/demo1.tsx
@@ -9,9 +9,18 @@ const Demo1 = () => {
     console.log('countdown: ended.')
   }
   return (
-    <Cell>
-      <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
-    </Cell>
+    <>
+      <Cell>
+        <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} />
+      </Cell>
+      <Cell>
+        <CountDown
+          endTime={stateRef.current.endTime}
+          type="primary"
+          onEnd={onEnd}
+        />
+      </Cell>
+    </>
   )
 }
 export default Demo1
diff --git a/src/packages/countdown/demos/taro/demo3.tsx b/src/packages/countdown/demos/taro/demo3.tsx
index 9488cf5530..381268fbfd 100644
--- a/src/packages/countdown/demos/taro/demo3.tsx
+++ b/src/packages/countdown/demos/taro/demo3.tsx
@@ -7,10 +7,7 @@ const Demo3 = () => {
   })
   return (
     <Cell>
-      <CountDown
-        endTime={stateRef.current.endTime}
-        format="DD 天 HH 时 mm 分 ss 秒"
-      />
+      <CountDown endTime={stateRef.current.endTime} format="DD天HH时mm分ss秒" />
     </Cell>
   )
 }
diff --git a/src/packages/countdown/demos/taro/demo8.tsx b/src/packages/countdown/demos/taro/demo8.tsx
index dace27f0f1..d631ddf47d 100644
--- a/src/packages/countdown/demos/taro/demo8.tsx
+++ b/src/packages/countdown/demos/taro/demo8.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react'
 import { Cell, CountDown } from '@nutui/nutui-react-taro'
-import { Text, View } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import '../../demo.scss'
 import pxTransform from '@/utils/px-transform'
 
@@ -8,7 +8,7 @@ const partItemStyle = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '#e8220e',
+  backgroundColor: '#fa2c19',
   color: '#fff',
   ...{
     width: pxTransform(20),
@@ -46,9 +46,8 @@ const Demo8 = () => {
             alignItems: 'center',
           }}
         >
-          <View style={partItemSymbolStyle}>
-            <Text>{resetTime.d}天</Text>
-          </View>
+          <View style={partItemStyle}>{resetTime.d}</View>
+          <View style={partItemSymbolStyle}>天</View>
           <View style={partItemStyle}>{resetTime.h}</View>
           <View style={partItemSymbolStyle}>:</View>
           <View style={partItemStyle}>{resetTime.m}</View>
diff --git a/src/packages/countdown/doc.en-US.md b/src/packages/countdown/doc.en-US.md
index 8bb44e9abc..ab7d11dee0 100644
--- a/src/packages/countdown/doc.en-US.md
+++ b/src/packages/countdown/doc.en-US.md
@@ -133,6 +133,18 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-countdown-display | display mode of countdown | `flex` |
-| \--nutui-countdown-color | Countdown text color | `$color-title` |
-| \--nutui-countdown-font-size | The font size of the countdown | `14px` |
\ No newline at end of file
+| \--nutui-countdown-display | 倒计时的布局方式 | `flex` |
+| \--nutui-countdown-color | Countdown text color | `$color-primary` |
+| \--nutui-countdown-font-size | Countdown font size | `10px` |
+| \--nutui-countdown-font-weight | Countdown font weight | `400` |
+| \--nutui-countdown-width | Time area width of the countdown | `20px` |
+| \--nutui-countdown-height | Time area height of the countdown | `14px` |
+| \--nutui-countdown-number-padding | Countdown time area padding | `0 1px` |
+| \--nutui-countdown-number-margin | Countdown time area margin | `0 2px` |
+| \--countdown-number-border-radius | Countdown time area border radius | `2px` |
+| \--nutui-countdown-color | Countdown time area text color | `$color-primary-light` |
+| \--nutui-countdown-background-color | Countdown time area background color | `$color-primary` |
+| \--nutui-countdown-border-color | Countdown time area border color color | `$color-primary` |
+| \--nutui-countdown-primary-color | When type is primary, the text color of the countdown time area | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | When type is primary, the background color of the countdown time area | `$color-primary` |
+| \--nutui-countdown-primary-border-color | When type is primary, the border color of the countdown time area is the color | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/countdown/doc.md b/src/packages/countdown/doc.md
index c0336e7be0..f31cbd41b9 100644
--- a/src/packages/countdown/doc.md
+++ b/src/packages/countdown/doc.md
@@ -92,6 +92,7 @@ import { CountDown } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| type| 展示类型 | `default`\|`primary` | `default` |
 | startTime | 开始时间 | `number` | `Date.now()` |
 | endTime | 结束时间 | `number` | `Date.now()` |
 | remainingTime | 剩余时间，单位是毫秒 | `number` | `0` |
@@ -135,5 +136,17 @@ import { CountDown } from '@nutui/nutui-react'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-countdown-display | 倒计时的布局方式 | `flex` |
-| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-title` |
-| \--nutui-countdown-font-size | 倒计时的字体大小 | `14px` |
\ No newline at end of file
+| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` |
+| \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` |
+| \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` |
+| \--nutui-countdown-width | 倒计时的时间区域宽度 | `20px` |
+| \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
+| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
+| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
+| \--countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
+| \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light` |
+| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` |
+| \--nutui-countdown-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | type为`primary`时，倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-primary-border-color | type为`primary`时，倒计时的时间区域的边框颜色颜色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/countdown/doc.taro.md b/src/packages/countdown/doc.taro.md
index 6c0924fd88..dd99369dfb 100644
--- a/src/packages/countdown/doc.taro.md
+++ b/src/packages/countdown/doc.taro.md
@@ -135,5 +135,17 @@ import { CountDown } from '@nutui/nutui-react-taro'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-countdown-display | 倒计时的布局方式 | `flex` |
-| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-title` |
-| \--nutui-countdown-font-size | 倒计时的字体大小 | `14px` |
\ No newline at end of file
+| \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` |
+| \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` |
+| \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` |
+| \--nutui-countdown-width | 倒计时的时间区域宽度 | `20px` |
+| \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` |
+| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` |
+| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` |
+| \--countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` |
+| \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light` |
+| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` |
+| \--nutui-countdown-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | type为`primary`时，倒计时的时间区域的背景颜色 | `$color-primary` |
+| \--nutui-countdown-primary-border-color | type为`primary`时，倒计时的时间区域的边框颜色颜色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/packages/countdown/doc.zh-TW.md b/src/packages/countdown/doc.zh-TW.md
index 45e0176f31..3dd412af22 100644
--- a/src/packages/countdown/doc.zh-TW.md
+++ b/src/packages/countdown/doc.zh-TW.md
@@ -135,5 +135,17 @@ import { CountDown } from '@nutui/nutui-react'
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-countdown-display | 倒計時的布局方式 | `flex` |
-| \--nutui-countdown-color | 倒計時的文字顏色 | `$color-title` |
-| \--nutui-countdown-font-size | 倒計時的字體大小 | `14px` |
\ No newline at end of file
+| \--nutui-countdown-color | 倒計時的文字顔色 | `$color-primary` |
+| \--nutui-countdown-font-size | 倒計時的字體大小 | `10px` |
+| \--nutui-countdown-font-weight | 倒計時的字體粗細 | `400` |
+| \--nutui-countdown-width | 倒計時的時間區域寬度 | `20px` |
+| \--nutui-countdown-height | 倒計時的時間區域高度 | `14px` |
+| \--nutui-countdown-number-padding | 倒計時的時間區域padding | `0 1px` |
+| \--nutui-countdown-number-margin | 倒計時的時間區域margin | `0 2px` |
+| \--countdown-number-border-radius | 倒計時的時間區域圓角大小 | `2px` |
+| \--nutui-countdown-color | 倒計時的時間區域的文字顔色 | `$color-primary-light` |
+| \--nutui-countdown-background-color | 倒計時的時間區域的背景顔色 | `$color-primary` |
+| \--nutui-countdown-border-color | 倒計時的時間區域的邊框顔色顔色 | `$color-primary` |
+| \--nutui-countdown-primary-color | type爲`primary`時，倒計時的時間區域的文字顔色 | `#FFFFFF` |
+| \--nutui-countdown-primary-background-color | type爲`primary`時，倒計時的時間區域的背景顔色 | `$color-primary` |
+| \--nutui-countdown-primary-border-color | type爲`primary`時，倒計時的時間區域的邊框顔色顔色 | `$color-primary` |
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 694f113aa6..f304a254e4 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -757,8 +757,44 @@ $numberkeyboard-key-confirm-background-color: var(
 
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
-$countdown-color: var(--nutui-countdown-color, $color-title) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, 14px) !default;
+$countdown-color: var(--nutui-countdown-color, $color-primary) !default;
+$countdown-font-size: var(--nutui-countdown-font-size, 10px) !default;
+$coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default;
+$countdown-height: var(--nutui-countdown-height, 14px) !default;
+$countdown-width: var(--nutui-countdown-width, 20px) !default;
+$countdown-number-padding: var(
+  --nutui-countdown-number-padding,
+  0 1px
+) !default;
+$countdown-number-border-radius: var(
+  --nutui-countdown-number-border-radius,
+  2px
+) !default;
+$countdown-number-margin: var(--nutui-countdown-number-margin, 0 2px) !default;
+$countdown-number-border-color: var(
+  --nutui-countdown-number-border-color,
+  $color-primary-light
+) !default;
+$countdown-number-color: var(
+  --nutui-countdown-number-color,
+  $color-primary
+) !default;
+$countdown-number-background-color: var(
+  --nutui-countdown-number-background-color,
+  transparent
+) !default;
+$countdown-number-primary-border-color: var(
+  --nutui-countdown-number-primary-border-color,
+  $color-primary
+) !default;
+$countdown-number-primary-color: var(
+  --nutui-countdown-number-primary-color,
+  #ffffff
+) !default;
+$countdown-number-primary-background-color: var(
+  --nutui-countdown-number-primary-background-color,
+  $color-primary
+) !default;
 
 //large price（✅）
 $price-symbol-padding-right: var(