Repository: Tencent/tdesign-mobile-vue
Pull request #614 (2023-04-21 08:19:15)

refactor(CountDown): new count-down
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [x] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- break(CountDown): 调整 DOM 结构
- feat(CountDown): 新增 size、theme、splitWithUnit 属性

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/4762943083)
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** -13.5 kB (-3%) 

**Total Size:** 432 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 29.3 kB | -6.75 kB (-19%) | 👏 |
| `./dist/tdesign.js` | 259 kB | +57 B (0%) |  |
| `./dist/tdesign.min.css` | 21.3 kB | -6.82 kB (-24%) | 🎉 |
| `./dist/tdesign.min.js` | 122 kB | +26 B (0%) |  |
github-actions[bot]: **Size Change:** -13.5 kB (-3%) 

**Total Size:** 432 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 29.3 kB | -6.75 kB (-19%) | 👏 |
| `./dist/tdesign.js` | 259 kB | +57 B (0%) |  |
| `./dist/tdesign.min.css` | 21.3 kB | -6.82 kB (-24%) | 🎉 |
| `./dist/tdesign.min.js` | 122 kB | +26 B (0%) |  |
github-actions[bot]: **Size Change:** -13.5 kB (-3%) 

**Total Size:** 431 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 29.3 kB | -6.75 kB (-19%) | 👏 |
| `./dist/tdesign.js` | 259 kB | +52 B (0%) |  |
| `./dist/tdesign.min.css` | 21.3 kB | -6.82 kB (-24%) | 🎉 |
| `./dist/tdesign.min.js` | 122 kB | +24 B (0%) |  |
github-actions[bot]: **Size Change:** -13.5 kB (-3%) 

**Total Size:** 431 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 29.3 kB | -6.75 kB (-19%) | 👏 |
| `./dist/tdesign.js` | 259 kB | +52 B (0%) |  |
| `./dist/tdesign.min.css` | 21.3 kB | -6.82 kB (-24%) | 🎉 |
| `./dist/tdesign.min.js` | 122 kB | +24 B (0%) |  |
github-actions[bot]: **Size Change:** -13.5 kB (-3%) 

**Total Size:** 431 kB

| Filename | Size | Change |  |
| :--- | :---: | :---: | :---: |
| `./dist/tdesign.css` | 29.3 kB | -6.75 kB (-19%) | 👏 |
| `./dist/tdesign.js` | 259 kB | +52 B (0%) |  |
| `./dist/tdesign.min.css` | 21.3 kB | -6.82 kB (-24%) | 🎉 |
| `./dist/tdesign.min.js` | 122 kB | +24 B (0%) |  |

Patch:
diff --git a/src/components.ts b/src/components.ts
index cc345b1c..48811a8a 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -33,7 +33,7 @@ export { DropdownMenu, DropdownItem } from './dropdown-menu';
 export { Collapse, CollapsePanel } from './collapse';
 export { Tabs, TabPanel } from './tabs';
 export { Swiper, SwiperItem } from './swiper';
-export { Countdown } from './count-down';
+export { CountDown } from './count-down';
 export { default as Avatar, AvatarGroup } from './avatar';
 export { default as Image } from './image';
 export { default as SwipeCell } from './swipe-cell';
diff --git a/src/count-down/count-down.en-US.md b/src/count-down/count-down.en-US.md
new file mode 100644
index 00000000..341b605a
--- /dev/null
+++ b/src/count-down/count-down.en-US.md
@@ -0,0 +1,25 @@
+:: BASE_DOC ::
+
+## API
+
+### CountDown Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+autoStart | Boolean | true | \- | N
+content | String / Slot / Function | 'default' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | HH:mm:ss | \- | N
+millisecond | Boolean | false | \- | N
+size | String | 'small' | options：small/medium/large | N
+splitWithUnit | Boolean | false | \- | N
+theme | String | 'default' | options：default/round/square | N
+time | Number | - | required | Y
+onChange | Function |  | Typescript：`(time: TimeData) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
+onFinish | Function |  | Typescript：`() => void`<br/> | N
+
+### CountDown Events
+
+name | params | description
+-- | -- | --
+change | `(time: TimeData)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
+finish | \- | \-
diff --git a/src/count-down/count-down.md b/src/count-down/count-down.md
index 8b851da2..a50f27d4 100644
--- a/src/count-down/count-down.md
+++ b/src/count-down/count-down.md
@@ -6,9 +6,12 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 autoStart | Boolean | true | 是否自动开始倒计时 | N
-content | String / Slot / Function | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+content | String / Slot / Function | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N
 millisecond | Boolean | false | 是否开启毫秒级渲染 | N
+size | String | 'medium' | 倒计时尺寸。可选项：small/medium/large | N
+splitWithUnit | Boolean | false | 使用时间单位分割 | N
+theme | String | 'default' | 倒计时风格。可选项：default/round/square | N
 time | Number | - | 必需。倒计时时长，单位毫秒 | Y
 onChange | Function |  | TS 类型：`(time: TimeData) => void`<br/>时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/> | N
 onFinish | Function |  | TS 类型：`() => void`<br/>倒计时结束时触发 | N
@@ -18,4 +21,4 @@ onFinish | Function |  | TS 类型：`() => void`<br/>倒计时结束时触发 |
 名称 | 参数 | 描述
 -- | -- | --
 change | `(time: TimeData)` | 时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/count-down/type.ts)。<br/>`interface TimeData {  days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`<br/>
-finish | - | 倒计时结束时触发
+finish | \- | 倒计时结束时触发
diff --git a/src/count-down/count-down.vue b/src/count-down/count-down.vue
index 7bab8bb9..28449ae4 100644
--- a/src/count-down/count-down.vue
+++ b/src/count-down/count-down.vue
@@ -1,45 +1,41 @@
 <template>
-  <template v-if="!time">
-    <t-node :content="contentLayout"></t-node>
-  </template>
-  <span :class="`${name} ${name}--${theme} ${name}--${size} ${!hasChinese ? '' : `${name}--split-with-unit`}`">
-    <template v-if="time">
+  <div :class="[`${name}`, `${name}--${theme}`, `${name}--${size}`]">
+    <t-node v-if="content !== 'default' && countDownContent" :content="countDownContent"></t-node>
+    <template v-else>
       <template v-for="item in showTimes" :key="item.mark">
-        <span :class="`${name}__digit`">{{ item.value }}</span>
-        <span v-if="item.mark" :class="`${name}__unit`">{{ item.mark }}</span>
+        <span :class="`${name}__item`">{{ item.value }}</span>
+        <span v-if="item.mark" :class="[`${name}__split`, `${name}__split--${splitWithUnit ? 'text' : 'dot'}`]">{{
+          item.mark
+        }}</span>
       </template>
     </template>
-  </span>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance } from 'vue';
 import config from '../config';
-import CountDownProps from './props';
+import props from './props';
 import { useCountDown } from '../shared/useCountDown';
 import { renderTNode, TNode } from '../shared';
 
 const { prefix } = config;
-const name = `${prefix}-countdown`;
+const name = `${prefix}-count-down`;
 
 export default defineComponent({
   name,
   components: { TNode },
-  props: {
-    ...CountDownProps,
-  },
+  props,
   setup(props) {
     const { time, showTimes } = useCountDown(props);
     const internalInstance = getCurrentInstance();
-    const hasChinese = /.*[\u4e00-\u9fa5]+.*$/?.test?.(props?.format);
-    const contentLayout = computed(() => renderTNode(internalInstance, 'content'));
-    // return
+    const countDownContent = computed(() => renderTNode(internalInstance, 'content'));
+
     return {
       name,
       time,
       showTimes,
-      hasChinese,
-      contentLayout,
+      countDownContent,
     };
   },
 });
diff --git a/src/count-down/demos/base.vue b/src/count-down/demos/base.vue
index 3cc147ff..c3c2f8ed 100644
--- a/src/count-down/demos/base.vue
+++ b/src/count-down/demos/base.vue
@@ -1,72 +1,43 @@
 <template>
-  <div>
-    <!-- 时分秒 -->
-    <div class="demo__box">
-      <t-countdown
-        content="ok"
-        :time="900000"
-        :auto-start="true"
-        :millisecond="false"
-        format="HH:mm:ss"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">时分秒</p>
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 时分秒 </text>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" />
     </div>
-    <!-- 带毫秒 -->
-    <div class="demo__box">
-      <t-countdown
-        content="ok"
-        :time="900123"
-        :auto-start="true"
-        :millisecond="true"
-        format="HH:mm:ss:sss"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带毫秒</p>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带毫秒 </text>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" millisecond />
     </div>
-    <!-- 带圆底 -->
-    <div class="demo__box t-countdown__circular-bottom">
-      <t-countdown
-        content="ok"
-        :time="1211211120000"
-        :auto-start="true"
-        :millisecond="false"
-        format="HH:mm:ss"
-        theme="round"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带圆底</p>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带方形底 </text>
+    <div class="demo-count-down-content">
+      <t-count-down content="default" :time="time" theme="square"> </t-count-down>
     </div>
-    <!-- 带方形底 -->
-    <div class="demo__box t-countdown__square-bottom">
-      <t-countdown
-        content="ok"
-        :time="900000"
-        :auto-start="true"
-        :millisecond="false"
-        format="HH:mm:ss"
-        theme="square"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带方形底</p>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带圆形底 </text>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" theme="round"> </t-count-down>
     </div>
-    <!-- 带单位 -->
-    <div class="demo__box t-countdown__has-unit">
-      <t-countdown
-        content="ok"
-        :time="111120000"
-        :auto-start="true"
-        :millisecond="false"
-        format="DD天HH时mm分ss秒"
-        theme="square"
-        @change="onChange"
-        @finish="onFinish"
-      />
-      <p class="format">带单位</p>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带单位 </text>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" split-with-unit theme="round" />
+    </div>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 无底色带单位 </text>
+    <div class="demo-count-down-content">
+      <t-count-down class="custom" :time="time" split-with-unit />
     </div>
   </div>
 </template>
@@ -80,27 +51,29 @@ interface TimeData {
   milliseconds: number;
 }
 
-const onChange = (val: TimeData) => {
-  console.log('onChange', val);
-};
-const onFinish = () => {
-  console.log('onFinish');
-};
+const time = 96 * 60 * 1000;
 </script>
 
 <style lang="less">
-.demo__box {
-  display: flex;
+.demo-count-down-desc {
+  color: rgba(0, 0, 0, 0.6);
   font-size: 14px;
-  align-items: center;
-  margin: 0 0 8px 16px;
-  justify-content: space-between;
-  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
-  .format {
-    opacity: 1;
-    font-size: 12px;
-    margin-right: 30%;
-    color: rgba(0, 0, 0, 0.4);
-  }
+}
+
+.demo-count-down-content {
+  margin: 16px 0 24px;
+}
+
+// 覆盖组件内部样式
+.custom .t-count-down__item {
+  color: #e34d59;
+  font-size: 18px;
+  line-height: 24px;
+  vertical-align: middle;
+}
+
+.custom .t-count-down__split {
+  font-size: 10px;
+  margin: 0 5px;
 }
 </style>
diff --git a/src/count-down/demos/mobile.vue b/src/count-down/demos/mobile.vue
index 4a8027eb..031ab8fd 100644
--- a/src/count-down/demos/mobile.vue
+++ b/src/count-down/demos/mobile.vue
@@ -2,35 +2,22 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">CountDown 倒计时</h1>
     <p class="summary">用于实时展示倒计时数值。</p>
-    <tdesign-demo-block title="01 类型" summary="动态倒计时间主要有时间数字和时分秒分割组成">
-      <BaseDemo />
+    <tdesign-demo-block title="01 组件类型" :padding="true">
+      <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 规格" summary="动倒计时带方底和圆底各尺寸规格">
-      <div class="demo-count-down">
-        <SpecDemo />
-      </div>
+    <tdesign-demo-block title="02 组件尺寸" summary="倒计时 large/medium/small 尺寸" :padding="true">
+      <sizeDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
-import SpecDemo from './specs.vue';
-import BaseDemo from './base.vue';
+import baseDemo from './base.vue';
+import sizeDemo from './size.vue';
 </script>
 
-<style lang="less">
-.demo__box {
-  display: flex;
-  font-size: 14px;
-  align-items: center;
-  margin: 0 0 8px 16px;
-  justify-content: space-between;
-  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
-  .format {
-    opacity: 1;
-    font-size: 12px;
-    margin-right: 30%;
-    color: rgba(0, 0, 0, 0.4);
-  }
+<style lang="less" scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
 }
 </style>
diff --git a/src/count-down/demos/size.vue b/src/count-down/demos/size.vue
new file mode 100644
index 00000000..372cb320
--- /dev/null
+++ b/src/count-down/demos/size.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 时分秒 </text>
+    <div class="demo-count-down-content">
+      <t-count-down size="small" :time="time" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down size="large" :time="time" />
+    </div>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带毫秒 </text>
+    <div class="demo-count-down-content">
+      <t-count-down size="small" :time="time" millisecond />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down format="HH:mm:ss:SSS" :time="time" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down size="large" :time="time" millisecond />
+    </div>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带方形底 </text>
+    <div class="demo-count-down-content">
+      <t-count-down size="small" :time="time" theme="square" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" theme="square" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down size="large" :time="time" theme="square" />
+    </div>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带圆形底 </text>
+    <div class="demo-count-down-content">
+      <t-count-down size="small" :time="time" theme="round" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" theme="round" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down size="large" :time="time" theme="round" />
+    </div>
+  </div>
+
+  <div class="demo-count-down">
+    <text class="demo-count-down-desc"> 带单位 </text>
+    <div class="demo-count-down-content">
+      <t-count-down size="small" :time="time" split-with-unit theme="round" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down :time="time" split-with-unit theme="round" />
+    </div>
+    <div class="demo-count-down-content">
+      <t-count-down size="large" :time="time" split-with-unit theme="round" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface TimeData {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  milliseconds: number;
+}
+
+const time = 96 * 60 * 1000;
+</script>
diff --git a/src/count-down/demos/specs.vue b/src/count-down/demos/specs.vue
deleted file mode 100644
index e2a01149..00000000
--- a/src/count-down/demos/specs.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <!-- S -->
-  <div class="demo-size__box">
-    <t-countdown
-      content="ok"
-      :time="900000"
-      :auto-start="true"
-      :millisecond="false"
-      format="HH:mm:ss"
-      theme="round"
-      @change="onChange"
-      @finish="onFinish"
-    />
-    <t-countdown
-      content="ok"
-      :time="900000"
-      :auto-start="true"
-      :millisecond="false"
-      format="HH:mm:ss"
-      theme="square"
-      @change="onChange"
-      @finish="onFinish"
-    />
-    <p class="format">S</p>
-  </div>
-  <!-- M -->
-  <div class="demo-size__box">
-    <t-countdown
-      content="ok"
-      :time="900000"
-      :auto-start="true"
-      :millisecond="false"
-      format="HH:mm:ss"
-      size="medium"
-      theme="round"
-      @change="onChange"
-      @finish="onFinish"
-    />
-    <t-countdown
-      content="ok"
-      :time="900000"
-      :auto-start="true"
-      :millisecond="false"
-      format="HH:mm:ss"
-      size="medium"
-      theme="square"
-      @change="onChange"
-      @finish="onFinish"
-    />
-    <p class="format">M</p>
-  </div>
-  <!-- L -->
-  <div class="demo-size__box">
-    <t-countdown
-      content="ok"
-      :time="900000"
-      :auto-start="true"
-      :millisecond="false"
-      format="HH:mm:ss"
-      size="large"
-      theme="round"
-      @change="onChange"
-      @finish="onFinish"
-    />
-    <t-countdown
-      content="ok"
-      :time="900000"
-      :auto-start="true"
-      :millisecond="false"
-      format="HH:mm:ss"
-      size="large"
-      theme="square"
-      @change="onChange"
-      @finish="onFinish"
-    />
-    <p class="format">L</p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-interface TimeData {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
-}
-
-const onChange = (val: TimeData) => {
-  console.log('onChange', val);
-};
-const onFinish = () => {
-  console.log('onFinish');
-};
-</script>
-
-<style lang="less">
-.demo-size__box {
-  display: flex;
-  font-size: 14px;
-  margin: 0 0 8px 16px;
-  align-items: center;
-  justify-content: space-between;
-  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
-  .format {
-    opacity: 1;
-    font-size: 12px;
-    margin-right: 10%;
-    color: rgba(0, 0, 0, 0.4);
-  }
-}
-</style>
diff --git a/src/count-down/index.ts b/src/count-down/index.ts
index 9db5959c..05457681 100644
--- a/src/count-down/index.ts
+++ b/src/count-down/index.ts
@@ -1,4 +1,4 @@
-import _Countdown from './count-down.vue';
+import _CountDown from './count-down.vue';
 import { withInstall, WithInstallType } from '../shared';
 import { TdCountDownProps } from './type';
 
@@ -7,4 +7,4 @@ import './style';
 export * from './type';
 export type CountDownProps = TdCountDownProps;
 
-export const Countdown: WithInstallType<typeof _Countdown> = withInstall(_Countdown);
+export const CountDown: WithInstallType<typeof _CountDown> = withInstall(_CountDown);
diff --git a/src/count-down/props.ts b/src/count-down/props.ts
index 800ac2d5..396716ed 100644
--- a/src/count-down/props.ts
+++ b/src/count-down/props.ts
@@ -25,20 +25,30 @@ export default {
   },
   /** 是否开启毫秒级渲染 */
   millisecond: Boolean,
-  /** 倒计时时长，单位毫秒 */
-  time: {
-    type: Number,
-    required: true,
-  },
   /** 倒计时尺寸 */
   size: {
-    type: String,
-    default: 'small',
+    type: String as PropType<TdCountDownProps['size']>,
+    default: 'medium' as TdCountDownProps['size'],
+    validator(val: TdCountDownProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
   },
+  /** 使用时间单位分割 */
+  splitWithUnit: Boolean,
   /** 倒计时风格 */
   theme: {
-    type: String,
-    default: 'default',
+    type: String as PropType<TdCountDownProps['theme']>,
+    default: 'default' as TdCountDownProps['theme'],
+    validator(val: TdCountDownProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'round', 'square'].includes(val);
+    },
+  },
+  /** 倒计时时长，单位毫秒 */
+  time: {
+    type: Number,
+    required: true,
   },
   /** 时间变化时触发 */
   onChange: Function as PropType<TdCountDownProps['onChange']>,
diff --git a/src/count-down/style/index.js b/src/count-down/style/index.js
index f576fed3..da1cf719 100644
--- a/src/count-down/style/index.js
+++ b/src/count-down/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/count-down/_index.less';
+import '../../_common/style/mobile/components/count-down/v2/_index.less';
diff --git a/src/count-down/type.ts b/src/count-down/type.ts
index cddeeea7..c82bac49 100644
--- a/src/count-down/type.ts
+++ b/src/count-down/type.ts
@@ -27,21 +27,25 @@ export interface TdCountDownProps {
    * @default false
    */
   millisecond?: boolean;
-  /**
-   * 倒计时时长，单位毫秒
-   */
-  time: number;
-
   /**
    * 倒计时尺寸
    * @default 'small'
    */
   size?: 'small' | 'medium' | 'large';
+  /**
+   * 使用时间单位分割
+   * @default false
+   */
+  splitWithUnit?: boolean;
   /**
    * 倒计时风格
    * @default 'default'
    */
   theme?: 'default' | 'round' | 'square';
+  /**
+   * 倒计时时长，单位毫秒
+   */
+  time: number;
   /**
    * 时间变化时触发
    */
diff --git a/src/shared/useCountDown/index.ts b/src/shared/useCountDown/index.ts
index f67c94f6..a95d0eee 100644
--- a/src/shared/useCountDown/index.ts
+++ b/src/shared/useCountDown/index.ts
@@ -4,11 +4,19 @@ import { TdUseCountDownProps, TdUseCountDown } from './type';
 import { getRemainTimes, getShowTimes, getScreenFps } from './utils';
 
 export function useCountDown(props: TdUseCountDownProps): TdUseCountDown {
-  const { time = 0, autoStart, millisecond, format = 'HH:mm:ss', onFinish, onChange } = props || {};
+  const {
+    time = 0,
+    autoStart,
+    millisecond = false,
+    format = 'HH:mm:ss',
+    splitWithUnit = false,
+    onFinish,
+    onChange,
+  } = props || {};
   // state
   const fps = ref();
   const count = ref(Number(time));
-  const showTimes = reactive(getShowTimes(getRemainTimes(time), format, !!millisecond));
+  const showTimes = reactive(getShowTimes(getRemainTimes(time), format, millisecond, splitWithUnit));
 
   // raf
   const { pause, resume } = useRafFn(
@@ -25,7 +33,7 @@ export function useCountDown(props: TdUseCountDownProps): TdUseCountDown {
       const times = getRemainTimes(count.value);
       onChange?.(times);
       count.value === 0 && onFinish?.();
-      getShowTimes(times, format)?.forEach?.((i, idx) => (showTimes[idx].value = i?.value));
+      getShowTimes(times, format, millisecond, splitWithUnit)?.forEach?.((i, idx) => (showTimes[idx].value = i?.value));
     },
     { immediate: autoStart },
   );
diff --git a/src/shared/useCountDown/type.ts b/src/shared/useCountDown/type.ts
index bcf21712..18a813fe 100644
--- a/src/shared/useCountDown/type.ts
+++ b/src/shared/useCountDown/type.ts
@@ -23,6 +23,21 @@ export interface TdUseCountDownProps {
    * @default false
    */
   millisecond?: boolean;
+  /**
+   * 倒计时尺寸
+   * @default 'small'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * 使用时间单位分割
+   * @default false
+   */
+  splitWithUnit?: boolean;
+  /**
+   * 倒计时风格
+   * @default 'default'
+   */
+  theme?: 'default' | 'round' | 'square';
   /**
    * 倒计时时长，单位毫秒
    */
diff --git a/src/shared/useCountDown/utils.ts b/src/shared/useCountDown/utils.ts
index a2084aef..3983988c 100644
--- a/src/shared/useCountDown/utils.ts
+++ b/src/shared/useCountDown/utils.ts
@@ -1,5 +1,13 @@
 import { TimeData, TdUseCountDownShowTimes } from './type';
 
+export const TimeDataUnit = {
+  DD: '天',
+  HH: '时',
+  mm: '分',
+  ss: '秒',
+  SSS: '毫秒',
+};
+
 /**
  * getRemainTimes
  * @param time
@@ -55,9 +63,14 @@ export const getMark = (format: string, type: string): string => format?.split?.
  * @param time
  * @returns
  */
-export const getShowTimes = (times: TimeData, format: string, milliseconds = false): TdUseCountDownShowTimes => {
+export const getShowTimes = (
+  times: TimeData,
+  format: string,
+  millisecond = false,
+  splitWithUnit = false,
+): TdUseCountDownShowTimes => {
   format = (format || 'DD:HH:mm:ss')?.toUpperCase?.();
-  milliseconds && !format.includes(':SSS') && (format = format.concat(':SSS'));
+  millisecond && !format.includes(':SSS') && (format = format.concat(':SSS'));
   const showTimes: TdUseCountDownShowTimes = [];
   if (format?.indexOf('DD') > -1) {
     showTimes?.push({
@@ -67,25 +80,25 @@ export const getShowTimes = (times: TimeData, format: string, milliseconds = fal
   }
   if (format?.indexOf('HH') > -1) {
     showTimes?.push({
-      mark: getMark(format, 'HH'),
+      mark: splitWithUnit ? TimeDataUnit.HH : getMark(format, 'HH'),
       value: fillZero(times?.hours),
     });
   }
   if (format?.indexOf('MM') > -1) {
     showTimes?.push({
-      mark: getMark(format, 'MM'),
+      mark: splitWithUnit ? TimeDataUnit.mm : getMark(format, 'MM'),
       value: fillZero(times?.minutes),
     });
   }
   if (format?.indexOf('SS') > -1) {
     showTimes?.push({
-      mark: getMark(format, 'SS'),
+      mark: splitWithUnit ? TimeDataUnit.ss : getMark(format, 'SS'),
       value: fillZero(times?.seconds),
     });
   }
-  if (format?.indexOf('SSS') > -1) {
+  if (format?.indexOf('SSS') > -1 || millisecond) {
     showTimes?.push({
-      mark: getMark(format, 'SSS'),
+      mark: splitWithUnit ? TimeDataUnit.SSS : getMark(format, 'SSS'),
       value: fillZero(times?.milliseconds, true),
     });
   }


Test patch:
diff --git a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
index c3e2ed9b..2269084d 100644
--- a/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/count-down/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,309 +1,360 @@
 // Vitest Snapshot v1
 
 exports[`CountDown > CountDown baseVue demo works fine 1`] = `
-<div>
-  <!-- 时分秒 -->
+<div
+  data-v-app=""
+>
+  
   <div
-    class="demo__box"
+    class="demo-count-down"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--default t-countdown--small"
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
+       时分秒 
+    </text>
+    <div
+      class="demo-count-down-content"
     >
-      时分秒
-    </p>
+      <div
+        class="t-count-down t-count-down--default t-count-down--medium"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
   </div>
-  <!-- 带毫秒 -->
   <div
-    class="demo__box"
+    class="demo-count-down"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--default t-countdown--small"
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        123
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
+       带毫秒 
+    </text>
+    <div
+      class="demo-count-down-content"
     >
-      带毫秒
-    </p>
+      <div
+        class="t-count-down t-count-down--default t-count-down--medium"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          000
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
   </div>
-  <!-- 带圆底 -->
   <div
-    class="demo__box t-countdown__circular-bottom"
+    class="demo-count-down"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--round t-countdown--small"
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        32
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
+       带方形底 
+    </text>
+    <div
+      class="demo-count-down-content"
     >
-      带圆底
-    </p>
+      <div
+        class="t-count-down t-count-down--square t-count-down--medium"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
   </div>
-  <!-- 带方形底 -->
   <div
-    class="demo__box t-countdown__square-bottom"
+    class="demo-count-down"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--small"
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
+       带圆形底 
+    </text>
+    <div
+      class="demo-count-down-content"
     >
-      带方形底
-    </p>
+      <div
+        class="t-count-down t-count-down--round t-count-down--medium"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
   </div>
-  <!-- 带单位 -->
   <div
-    class="demo__box t-countdown__has-unit"
+    class="demo-count-down"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--small t-countdown--split-with-unit"
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        01
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        天
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        06
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        时
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        52
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        分
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
+       带单位 
+    </text>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--round t-count-down--medium"
       >
-        秒
-      </span>
-      
-      
-    </span>
-    
-    <p
-      class="format"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          秒
+        </span>
+        
+        
+      </div>
+    </div>
+  </div>
+  <div
+    class="demo-count-down"
+  >
+    <text
+      class="demo-count-down-desc"
+    >
+       无底色带单位 
+    </text>
+    <div
+      class="demo-count-down-content"
     >
-      带单位
-    </p>
+      <div
+        class="t-count-down t-count-down--default t-count-down--medium custom"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          秒
+        </span>
+        
+        
+      </div>
+    </div>
   </div>
+  
 </div>
 `;
 
 exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
+  data-v-4272c432=""
 >
   <h1
     class="title"
+    data-v-4272c432=""
   >
     CountDown 倒计时
   </h1>
   <p
     class="summary"
+    data-v-4272c432=""
   >
     用于实时展示倒计时数值。
   </p>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-4272c432=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -311,895 +362,1825 @@ exports[`CountDown > CountDown mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        动态倒计时间主要有时间数字和时分秒分割组成
-      </p>
+      <!--v-if-->
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
-      <div>
-        <!-- 时分秒 -->
+      
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           时分秒 
+        </text>
         <div
-          class="demo__box"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--default t-countdown--small"
+          <div
+            class="t-count-down t-count-down--default t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            时分秒
-          </p>
+          </div>
         </div>
-        <!-- 带毫秒 -->
+      </div>
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           带毫秒 
+        </text>
         <div
-          class="demo__box"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--default t-countdown--small"
+          <div
+            class="t-count-down t-count-down--default t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              123
+              000
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            带毫秒
-          </p>
+          </div>
         </div>
-        <!-- 带圆底 -->
+      </div>
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           带方形底 
+        </text>
         <div
-          class="demo__box t-countdown__circular-bottom"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--round t-countdown--small"
+          <div
+            class="t-count-down t-count-down--square t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              32
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            带圆底
-          </p>
+          </div>
         </div>
-        <!-- 带方形底 -->
+      </div>
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           带圆形底 
+        </text>
         <div
-          class="demo__box t-countdown__square-bottom"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--square t-countdown--small"
+          <div
+            class="t-count-down t-count-down--round t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            带方形底
-          </p>
+          </div>
         </div>
-        <!-- 带单位 -->
+      </div>
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           带单位 
+        </text>
         <div
-          class="demo__box t-countdown__has-unit"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--square t-countdown--small t-countdown--split-with-unit"
+          <div
+            class="t-count-down t-count-down--round t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               01
             </span>
             <span
-              class="t-countdown__unit"
-            >
-              天
-            </span>
-            
-            
-            <span
-              class="t-countdown__digit"
-            >
-              06
-            </span>
-            <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--text"
             >
               时
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              52
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--text"
             >
               分
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--text"
             >
               秒
             </span>
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            带单位
-          </p>
+          </div>
         </div>
       </div>
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block"
-  >
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           无底色带单位 
+        </text>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--default t-count-down--medium custom"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              时
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              分
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              秒
+            </span>
+            
+            
+          </div>
+        </div>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-4272c432=""
+  >
     <div
       class="tdesign-mobile-demo-block__header"
     >
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        02 规格
+        02 组件尺寸
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        动倒计时带方底和圆底各尺寸规格
+        倒计时 large/medium/small 尺寸
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
+      
       <div
         class="demo-count-down"
       >
-        
-        <!-- S -->
+        <text
+          class="demo-count-down-desc"
+        >
+           时分秒 
+        </text>
         <div
-          class="demo-size__box"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--round t-countdown--small"
+          <div
+            class="t-count-down t-count-down--default t-count-down--small"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--square t-countdown--small"
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--default t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            S
-          </p>
+          </div>
         </div>
-        <!-- M -->
         <div
-          class="demo-size__box"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--round t-countdown--medium"
+          <div
+            class="t-count-down t-count-down--default t-count-down--large"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--square t-countdown--medium"
+          </div>
+        </div>
+      </div>
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           带毫秒 
+        </text>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--default t-count-down--small"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              00
+              01
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              000
+            </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
-          >
-            M
-          </p>
+          </div>
         </div>
-        <!-- L -->
         <div
-          class="demo-size__box"
+          class="demo-count-down-content"
         >
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--round t-countdown--large"
+          <div
+            class="t-count-down t-count-down--default t-count-down--medium"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
             >
               00
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              000
+            </span>
+            <!--v-if-->
+            
+            
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--default t-count-down--large"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              000
+            </span>
             <!--v-if-->
             
             
-          </span>
-          
-          
-          <!--v-if-->
-          <span
-            class="t-countdown t-countdown--square t-countdown--large"
+          </div>
+        </div>
+      </div>
+      <div
+        class="demo-count-down"
+      >
+        <text
+          class="demo-count-down-desc"
+        >
+           带方形底 
+        </text>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--square t-count-down--small"
           >
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
             >
               00
             </span>
+            <!--v-if-->
+            
+            
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--square t-count-down--medium"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
-              15
+              36
             </span>
             <span
-              class="t-countdown__unit"
+              class="t-count-down__split t-count-down__split--dot"
             >
               :
             </span>
             
             
             <span
-              class="t-countdown__digit"
+              class="t-count-down__item"
             >
               00
             </span>
             <!--v-if-->
             
             
-          </span>
-          
-          <p
-            class="format"
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--square t-count-down--large"
           >
-            L
-          </p>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <!--v-if-->
+            
+            
+          </div>
         </div>
-        
       </div>
-      
-    </div>
-  </div>
-</div>
-`;
-
-exports[`CountDown > CountDown specsVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
-  <!-- S -->
-  <div
-    class="demo-size__box"
-  >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--round t-countdown--small"
-    >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--small"
-    >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
-    >
-      S
-    </p>
-  </div>
-  <!-- M -->
-  <div
-    class="demo-size__box"
-  >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--round t-countdown--medium"
-    >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
+      <div
+        class="demo-count-down"
       >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
+        <text
+          class="demo-count-down-desc"
+        >
+           带圆形底 
+        </text>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--round t-count-down--small"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <!--v-if-->
+            
+            
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--round t-count-down--medium"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <!--v-if-->
+            
+            
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--round t-count-down--large"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--dot"
+            >
+              :
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <!--v-if-->
+            
+            
+          </div>
+        </div>
+      </div>
+      <div
+        class="demo-count-down"
       >
-        :
-      </span>
+        <text
+          class="demo-count-down-desc"
+        >
+           带单位 
+        </text>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--round t-count-down--small"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              时
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              分
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              秒
+            </span>
+            
+            
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--round t-count-down--medium"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              时
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              分
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              秒
+            </span>
+            
+            
+          </div>
+        </div>
+        <div
+          class="demo-count-down-content"
+        >
+          <div
+            class="t-count-down t-count-down--round t-count-down--large"
+          >
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              01
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              时
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              36
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              分
+            </span>
+            
+            
+            <span
+              class="t-count-down__item"
+            >
+              00
+            </span>
+            <span
+              class="t-count-down__split t-count-down__split--text"
+            >
+              秒
+            </span>
+            
+            
+          </div>
+        </div>
+      </div>
       
       
-      <span
-        class="t-countdown__digit"
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CountDown > CountDown sizeVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="demo-count-down"
+  >
+    <text
+      class="demo-count-down-desc"
+    >
+       时分秒 
+    </text>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--default t-count-down--small"
       >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--medium"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--default t-count-down--medium"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--default t-count-down--large"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+  </div>
+  <div
+    class="demo-count-down"
+  >
+    <text
+      class="demo-count-down-desc"
+    >
+       带毫秒 
+    </text>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--default t-count-down--small"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          000
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
+      <div
+        class="t-count-down t-count-down--default t-count-down--medium"
       >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          000
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
     >
-      M
-    </p>
+      <div
+        class="t-count-down t-count-down--default t-count-down--large"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          000
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
   </div>
-  <!-- L -->
   <div
-    class="demo-size__box"
+    class="demo-count-down"
   >
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--round t-countdown--large"
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
-      >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
-      >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
+       带方形底 
+    </text>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--square t-count-down--small"
       >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--square t-count-down--medium"
       >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--square t-count-down--large"
       >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    
-    <!--v-if-->
-    <span
-      class="t-countdown t-countdown--square t-countdown--large"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+  </div>
+  <div
+    class="demo-count-down"
+  >
+    <text
+      class="demo-count-down-desc"
     >
-      
-      
-      <span
-        class="t-countdown__digit"
+       带圆形底 
+    </text>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--round t-count-down--small"
       >
-        00
-      </span>
-      <span
-        class="t-countdown__unit"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--round t-count-down--medium"
       >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--round t-count-down--large"
       >
-        15
-      </span>
-      <span
-        class="t-countdown__unit"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--dot"
+        >
+          :
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <!--v-if-->
+        
+        
+      </div>
+    </div>
+  </div>
+  <div
+    class="demo-count-down"
+  >
+    <text
+      class="demo-count-down-desc"
+    >
+       带单位 
+    </text>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--round t-count-down--small"
       >
-        :
-      </span>
-      
-      
-      <span
-        class="t-countdown__digit"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          秒
+        </span>
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
+    >
+      <div
+        class="t-count-down t-count-down--round t-count-down--medium"
       >
-        00
-      </span>
-      <!--v-if-->
-      
-      
-    </span>
-    
-    <p
-      class="format"
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          秒
+        </span>
+        
+        
+      </div>
+    </div>
+    <div
+      class="demo-count-down-content"
     >
-      L
-    </p>
+      <div
+        class="t-count-down t-count-down--round t-count-down--large"
+      >
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          01
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          时
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          36
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          分
+        </span>
+        
+        
+        <span
+          class="t-count-down__item"
+        >
+          00
+        </span>
+        <span
+          class="t-count-down__split t-count-down__split--text"
+        >
+          秒
+        </span>
+        
+        
+      </div>
+    </div>
   </div>
   
 </div>
diff --git a/src/count-down/__test__/demo.test.jsx b/src/count-down/__test__/demo.test.jsx
index 5c2dc6d4..4b51ea07 100644
--- a/src/count-down/__test__/demo.test.jsx
+++ b/src/count-down/__test__/demo.test.jsx
@@ -5,12 +5,12 @@
 import { mount } from '@vue/test-utils';
 import baseVue from '@/count-down/demos/base.vue';
 import mobileVue from '@/count-down/demos/mobile.vue';
-import specsVue from '@/count-down/demos/specs.vue';
+import sizeVue from '@/count-down/demos/size.vue';
 
 const mapper = {
   baseVue,
   mobileVue,
-  specsVue,
+  sizeVue,
 };
 
 describe('CountDown', () => {
diff --git a/src/count-down/__test__/index.test.jsx b/src/count-down/__test__/index.test.jsx
index 4be3bebc..cd0b5a4e 100644
--- a/src/count-down/__test__/index.test.jsx
+++ b/src/count-down/__test__/index.test.jsx
@@ -19,9 +19,6 @@ describe('countdown.vue', async () => {
       expect(wrapper.text()).toContain('00:00:01');
       await sleep(500);
       expect(wrapper.text()).toContain('00:00:00');
-      await sleep(500);
-      await nextTick();
-      expect(wrapper.text()).toContain('default');
     });
 
     it('content', async () => {
@@ -63,12 +60,12 @@ describe('countdown.vue', async () => {
 
     it('size', async () => {
       const wrapper = mount(<CountDown time={100000}></CountDown>);
-      expect(wrapper.find('.t-countdown--small').exists()).toBe(true);
+      expect(wrapper.find('.t-count-down--medium').exists()).toBe(true);
     });
 
     it('theme', async () => {
       const wrapper = mount(<CountDown time={100000}></CountDown>);
-      expect(wrapper.find('.t-countdown--default').exists()).toBe(true);
+      expect(wrapper.find('.t-count-down--default').exists()).toBe(true);
     });
   });
 
@@ -91,7 +88,7 @@ describe('countdown.vue', async () => {
   describe('slots', async () => {
     it('content', async () => {
       const temp = <div>测试</div>;
-      const wrapper = mount(<CountDown time={1000}></CountDown>, {
+      const wrapper = mount(<CountDown time={1000} content="slot"></CountDown>, {
         slots: {
           content: temp,
         },