Repository: Tencent/tdesign-mobile-vue
Pull request #618 (2023-04-23 07:25:45)

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

**Total Size:** 445 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 258 kB | -21 B (0%) |
| `./dist/tdesign.min.css` | 28.1 kB | -22 B (0%) |
| `./dist/tdesign.min.js` | 122 kB | -27 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 36 kB |

</details>


github-actions[bot]: **Size Change:** -70 B (0%) 

**Total Size:** 445 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 258 kB | -21 B (0%) |
| `./dist/tdesign.min.css` | 28.1 kB | -22 B (0%) |
| `./dist/tdesign.min.js` | 122 kB | -27 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 36 kB |

</details>


github-actions[bot]: **Size Change:** -70 B (0%) 

**Total Size:** 445 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 258 kB | -21 B (0%) |
| `./dist/tdesign.min.css` | 28.1 kB | -22 B (0%) |
| `./dist/tdesign.min.js` | 122 kB | -27 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 36 kB |

</details>



Patch:
diff --git a/src/cell/cell.vue b/src/cell/cell.vue
index 71bb54d7..5fbeac7d 100644
--- a/src/cell/cell.vue
+++ b/src/cell/cell.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="styleCell" @click="onClick">
+  <div v-hover="{ className: `${name}--hover`, active: hover }" :class="styleCell" @click="onClick">
     <div :class="`${name}__left`">
       <div v-if="leftIconContent" :class="`${name}__left-icon`">
         <t-node :content="leftIconContent" />
@@ -29,7 +29,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, toRefs, h } from 'vue';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
-import { renderTNode, renderContent, TNode, useEmitEvent } from '../shared';
+import { renderTNode, renderContent, TNode, useEmitEvent, Hover } from '../shared';
 import config from '../config';
 import CellProps from './props';
 import { useFormDisabled } from '../form/hooks';
@@ -40,6 +40,7 @@ const name = `${prefix}-cell`;
 export default defineComponent({
   name,
   components: { TNode },
+  directives: { Hover },
   props: CellProps,
   emits: ['click'],
   setup(props, context) {
diff --git a/src/cell/demos/single.vue b/src/cell/demos/single.vue
index edb96a7f..658d05b4 100644
--- a/src/cell/demos/single.vue
+++ b/src/cell/demos/single.vue
@@ -1,19 +1,19 @@
 <template>
   <t-cell-group bordered>
-    <t-cell title="单行标题" arrow />
-    <t-cell title="单行标题" arrow required />
-    <t-cell title="单行标题" arrow>
+    <t-cell title="单行标题" arrow hover />
+    <t-cell title="单行标题" arrow hover required />
+    <t-cell title="单行标题" arrow hover>
       <template #note>
         <t-badge :count="16" />
       </template>
     </t-cell>
-    <t-cell title="单行标题">
+    <t-cell title="单行标题" hover>
       <template #note>
         <t-switch :default-value="true" />
       </template>
     </t-cell>
-    <t-cell title="单行标题" note="辅助信息" arrow />
-    <t-cell title="单行标题" :left-icon="lockIcon" arrow />
+    <t-cell title="单行标题" note="辅助信息" arrow hover />
+    <t-cell title="单行标题" :left-icon="lockIcon" arrow hover />
   </t-cell-group>
 </template>
 
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/fab/demos/advance.vue b/src/fab/demos/advance.vue
new file mode 100644
index 00000000..9cb3c9db
--- /dev/null
+++ b/src/fab/demos/advance.vue
@@ -0,0 +1,15 @@
+<template>
+  <t-fab :icon="iconFunc" text="按钮文字" :style="customStyle" @click="onClick" />
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { AddIcon } from 'tdesign-icons-vue-next';
+
+const iconFunc = () => h(AddIcon, { size: '24px' });
+
+const customStyle = 'right: 16px; bottom: 32px;';
+const onClick = () => {
+  console.log('click Fab');
+};
+</script>
diff --git a/src/fab/demos/display.vue b/src/fab/demos/base.vue
similarity index 58%
rename from src/fab/demos/display.vue
rename to src/fab/demos/base.vue
index f58730b3..0ad8ee54 100644
--- a/src/fab/demos/display.vue
+++ b/src/fab/demos/base.vue
@@ -1,17 +1,13 @@
 <template>
-  <div>
-    <t-fab :icon="iconFunc" @click="onClick" />
-  </div>
+  <t-fab :icon="iconFunc" @click="onClick" />
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
 import { AddIcon } from 'tdesign-icons-vue-next';
 
-const iconFunc = () => h(AddIcon);
+const iconFunc = () => h(AddIcon, { size: '24px' });
 const onClick = () => {
   console.log('click Fab');
 };
 </script>
-
-<style lang="less" scoped></style>
diff --git a/src/fab/demos/mobile.vue b/src/fab/demos/mobile.vue
index 67f5b1c7..f94549d5 100644
--- a/src/fab/demos/mobile.vue
+++ b/src/fab/demos/mobile.vue
@@ -2,24 +2,36 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Fab 悬浮按钮</h1>
     <p class="summary">当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。</p>
-    <tdesign-demo-block title="01 类型" summary="纯图标悬浮按钮">
-      <div class="toast-demo">
-        <t-button block size="large" variant="outline" @click="changeType('base')">基础使用</t-button>
-        <t-button block size="large" variant="outline" @click="changeType('advanced')">进阶使用</t-button>
-      </div>
+    <tdesign-demo-block title="01 组件类型" summary="纯图标悬浮按钮" :padding="true">
+      <t-button v-bind="btnProps" @click="changeType('base')">纯图标悬浮按钮</t-button>
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="图标加文字悬浮按钮" :padding="true">
+      <t-button v-bind="btnProps" @click="changeType('advance')">图标加文字悬浮按钮</t-button>
     </tdesign-demo-block>
     <BaseDemo v-if="type === 'base'" />
-    <TextDemo v-if="type === 'advanced'" />
+    <AdvanceDemo v-if="type === 'advance'" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import BaseDemo from './display.vue';
-import TextDemo from './text.vue';
+import BaseDemo from './base.vue';
+import AdvanceDemo from './advance.vue';
 
 const type = ref('base');
 const changeType = (t: string) => (type.value = t);
+const btnProps = {
+  block: true,
+  size: 'large',
+  theme: 'primary',
+  variant: 'outline',
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.tdesign-mobile-demo {
+  background-color: #fff;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/fab/demos/text.vue b/src/fab/demos/text.vue
deleted file mode 100644
index d04e4c87..00000000
--- a/src/fab/demos/text.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <t-fab :icon="iconFunc" text="按钮文字" :button-props="baseButtonProps" :style="customStyle" @click="onClick" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { h } from 'vue';
-import { AddIcon } from 'tdesign-icons-vue-next';
-
-const iconFunc = () => h(AddIcon);
-const baseButtonProps = {
-  variant: 'outline',
-};
-const customStyle = 'right: 16px; bottom: 32px;';
-const onClick = () => {
-  console.log('click Fab');
-};
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/fab/fab.vue b/src/fab/fab.vue
index 4b457af8..934cade8 100644
--- a/src/fab/fab.vue
+++ b/src/fab/fab.vue
@@ -1,50 +1,50 @@
 <template>
-  <t-button v-bind="customButtonProps" :class="classes" :style="style" @click="onClick">
-    <t-node v-if="iconTNode" :content="iconTNode" />
-    <span v-if="text" :class="`${name}__text`">{{ text }}</span>
+  <t-button
+    size="large"
+    theme="primary"
+    :class="classes"
+    :style="style"
+    v-bind="btnProps"
+    :icon="() => iconTNode"
+    @click="onClick"
+  >
+    {{ text }}
   </t-button>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance } from 'vue';
-import { renderTNode, TNode, useEmitEvent } from '../shared';
+
+import { renderTNode, useEmitEvent } from '../shared';
 import props from './props';
 import config from '../config';
-import TButton, { TdButtonProps } from '../button';
+import TButton, { ButtonProps } from '../button';
 
 const { prefix } = config;
 const name = `${prefix}-fab`;
 
 export default defineComponent({
   name,
-  components: { TNode, TButton },
+  components: { TButton },
   props,
   emits: ['click'],
   setup(props, context) {
+    const internalInstance = getCurrentInstance();
+    const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
     const emitEvent = useEmitEvent(props, context.emit);
 
     const classes = computed(() => ({
       [`${name}`]: true,
-      [`${name}--icononly`]: props.icon && !props.text,
     }));
+    const btnProps = computed<ButtonProps>(() => ({ shape: props.text ? 'round' : 'circle', ...props.buttonProps }));
 
     const onClick = (e: MouseEvent) => emitEvent('click', { e });
 
-    const baseButtonProps = {
-      size: 'middle',
-      shape: 'round',
-      theme: 'primary',
-    };
-    const customButtonProps = computed(() => ({ ...(baseButtonProps as TdButtonProps), ...props.buttonProps }));
-
-    const internalInstance = getCurrentInstance();
-    const iconTNode = computed(() => renderTNode(internalInstance, 'icon'));
-
     return {
       name,
       classes,
+      btnProps,
       iconTNode,
-      customButtonProps,
       onClick,
     };
   },
diff --git a/src/fab/style/index.js b/src/fab/style/index.js
index 2a296b56..0773009b 100644
--- a/src/fab/style/index.js
+++ b/src/fab/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/fab/_index.less';
+import '../../_common/style/mobile/components/fab/v2/_index.less';
diff --git a/src/shared/hover.ts b/src/shared/hover.ts
new file mode 100644
index 00000000..34ac6233
--- /dev/null
+++ b/src/shared/hover.ts
@@ -0,0 +1,38 @@
+import { DirectiveBinding } from 'vue';
+
+interface BindingObj {
+  active: boolean;
+  className: string;
+}
+
+const Hover = {
+  created(el: HTMLElement, binding: DirectiveBinding<BindingObj>) {
+    const startTime = 50;
+    const stayTime = 70;
+    const { className, active } = binding.value;
+
+    if (!active) return;
+
+    el.addEventListener(
+      'touchstart',
+      () => {
+        setTimeout(() => {
+          el?.classList.add(className);
+        }, startTime);
+      },
+      false,
+    );
+
+    el.addEventListener(
+      'touchend',
+      () => {
+        setTimeout(() => {
+          el?.classList.remove(className);
+        }, stayTime);
+      },
+      false,
+    );
+  },
+};
+
+export default Hover;
diff --git a/src/shared/index.ts b/src/shared/index.ts
index 013b3873..e896d7d0 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -16,3 +16,6 @@ export * from './useTouch';
 export * from './useScrollParent';
 export * from './useExpose';
 export * from './useTest';
+
+/* directives */
+export { default as Hover } from './hover';
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),
     });
   }
diff --git a/src/slider/demos/base.vue b/src/slider/demos/base.vue
index f3ae9617..4aea81fe 100644
--- a/src/slider/demos/base.vue
+++ b/src/slider/demos/base.vue
@@ -1,12 +1,12 @@
 <template>
-  <t-slider v-model="value" :label="false" :on-change="onChange" />
+  <div class="wrapper">
+    <t-slider :default-value="23" />
+  </div>
 </template>
 
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-const onChange = ($event: number | number[]) => {
-  console.log(`change to ${$event}`);
-};
-</script>
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/capsule.vue b/src/slider/demos/capsule.vue
new file mode 100644
index 00000000..3ba1e655
--- /dev/null
+++ b/src/slider/demos/capsule.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="wrapper">
+    <t-slider :default-value="30" theme="capsule" />
+  </div>
+
+  <div class="wrapper">
+    <t-slider :default-value="[40, 60]" range theme="capsule" />
+  </div>
+
+  <div class="wrapper">
+    <t-slider :default-value="[40, 60]" range label="${value}" theme="capsule" />
+  </div>
+
+  <div class="wrapper">
+    <t-slider :default-value="60" :marks="marks" :step="20" theme="capsule" />
+  </div>
+
+  <div class="wrapper">
+    <t-slider :default-value="[20, 80]" range :marks="marks" :step="20" theme="capsule" />
+  </div>
+</template>
+<script lang="ts" setup>
+const marks = {
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 16px 0;
+}
+</style>
diff --git a/src/slider/demos/disable.vue b/src/slider/demos/disable.vue
deleted file mode 100644
index f3a2fb2a..00000000
--- a/src/slider/demos/disable.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <t-slider :default-value="30" :min="30" disabled :label="false" />
-</template>
diff --git a/src/slider/demos/disabled.vue b/src/slider/demos/disabled.vue
new file mode 100644
index 00000000..6d25ef9a
--- /dev/null
+++ b/src/slider/demos/disabled.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="wrapper">
+    <t-slider :value="35" disabled />
+  </div>
+
+  <div class="wrapper">
+    <t-slider show-extreme-value label="${value}" :value="[40, 60]" range disabled />
+  </div>
+
+  <div class="wrapper">
+    <t-slider range :value="[20, 60]" :marks="marks" :step="20" disabled />
+  </div>
+</template>
+<script lang="ts" setup>
+const marks = {
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+};
+</script>
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/label.vue b/src/slider/demos/label.vue
new file mode 100644
index 00000000..00b2f40a
--- /dev/null
+++ b/src/slider/demos/label.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="wrapper">
+    <t-slider :value="value" :label="true" :on-change="onChange" />
+  </div>
+  <div class="wrapper">
+    <t-slider range :default-value="[20, 60]" :label="true" show-extreme-value />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(10);
+const onChange = (e: any) => {
+  value.value = e.value;
+};
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/mark.vue b/src/slider/demos/mark.vue
deleted file mode 100644
index 01c3c53b..00000000
--- a/src/slider/demos/mark.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <t-slider v-model="value" :label="label" :marks="marks" :step="50" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-const label = ref(false);
-const marks = ref({ 0: '小', 50: '中', 100: '大' });
-</script>
diff --git a/src/slider/demos/mobile.vue b/src/slider/demos/mobile.vue
index 7a5c2d1a..214c4239 100644
--- a/src/slider/demos/mobile.vue
+++ b/src/slider/demos/mobile.vue
@@ -2,61 +2,38 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">Slider 滑动选择器</h1>
     <p class="summary">用于选择横轴上的数值、区间、档位</p>
-    <tdesign-demo-block title="01 类型" summary="基础滑动选择器">
-      <div class="slider-demo">
-        <BaseDemo />
-      </div>
+    <tdesign-demo-block title="01 类型" summary="单游标滑块">
+      <baseDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带数值滑动选择器">
-      <div class="slider-demo">
-        <ValueDemo />
-      </div>
+    <tdesign-demo-block summary="双游标滑块">
+      <rangeDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="起始非零滑动选择器">
-      <div class="slider-demo">
-        <UnZeroDemo />
-      </div>
+    <tdesign-demo-block summary="带数值单游标/双游标滑块">
+      <labelDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带刻度滑动选择器">
-      <div class="slider-demo">
-        <MarkDemo />
-      </div>
+    <tdesign-demo-block summary="带刻度单游标/双游标滑块">
+      <stepDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="区间滑动选择器">
-      <div class="slider-demo">
-        <RangeDemo />
-      </div>
+    <tdesign-demo-block title="02 组件状态" summary="滑块禁用状态">
+      <disableDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 状态" summary="滑动选择器禁用状态">
-      <div class="slider-demo">
-        <DisableDemo />
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block title="03 规格" summary="无标题滑动选择器">
-      <div class="slider-demo">
-        <BaseDemo />
-      </div>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="有标题滑动选择器">
-      <div class="slider-demo">
-        <TitleDemo />
-      </div>
+    <tdesign-demo-block title="03 特殊样式" summary="胶囊型滑块">
+      <capsuleDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script lang="ts" setup>
-import BaseDemo from './base.vue';
-import MarkDemo from './mark.vue';
-import ValueDemo from './value.vue';
-import RangeDemo from './range.vue';
-import DisableDemo from './disable.vue';
-import UnZeroDemo from './unZero.vue';
-import TitleDemo from './title.vue';
+import baseDemo from './base.vue';
+import rangeDemo from './range.vue';
+import labelDemo from './label.vue';
+import stepDemo from './step.vue';
+import disableDemo from './disabled.vue';
+import capsuleDemo from './capsule.vue';
 </script>
 
 <style scoped>
 .tdesign-mobile-demo {
-  background: #fff;
+  background: #f6f6f6;
 }
 </style>
diff --git a/src/slider/demos/range.vue b/src/slider/demos/range.vue
index f42f98cb..0b295a88 100644
--- a/src/slider/demos/range.vue
+++ b/src/slider/demos/range.vue
@@ -1,5 +1,7 @@
 <template>
-  <t-slider v-model="rangeValue" show-extreme-value range @change="onChange" />
+  <div class="wrapper">
+    <t-slider :default-value="rangeValue" range @change="onChange" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -11,3 +13,10 @@ function onChange($event: number | number[]) {
   console.log(`change to ${$event}`);
 }
 </script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/step.vue b/src/slider/demos/step.vue
new file mode 100644
index 00000000..1e4de24f
--- /dev/null
+++ b/src/slider/demos/step.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="wrapper">
+    <t-slider v-model="value" :marks="marks" :step="20" />
+  </div>
+
+  <div class="wrapper">
+    <t-slider range :default-value="[20, 60]" :marks="marks" :step="20" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(60);
+const marks = ref({
+  0: '0',
+  20: '20',
+  40: '40',
+  60: '60',
+  80: '80',
+  100: '100',
+});
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+  background: #fff;
+  margin-top: 16px;
+  padding: 18px 0;
+}
+</style>
diff --git a/src/slider/demos/title.vue b/src/slider/demos/title.vue
deleted file mode 100644
index 2b88f959..00000000
--- a/src/slider/demos/title.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="flex">
-    <span :style="{ width: '120px', 'margin-right': '10px' }"> 选择器标题 </span>
-    <t-slider v-model="value" :label="false" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-</script>
-<style>
-.flex {
-  display: flex;
-  align-items: center;
-}
-</style>
diff --git a/src/slider/demos/unZero.vue b/src/slider/demos/unZero.vue
deleted file mode 100644
index a6c8b4db..00000000
--- a/src/slider/demos/unZero.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <t-slider :default-value="30" :min="30" :max="200" :label="false"> </t-slider>
-</template>
diff --git a/src/slider/demos/value.vue b/src/slider/demos/value.vue
deleted file mode 100644
index 13caa023..00000000
--- a/src/slider/demos/value.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <t-slider v-model="value" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const value = ref(50);
-</script>
diff --git a/src/slider/props.ts b/src/slider/props.ts
index 85bfd85f..ae1113df 100644
--- a/src/slider/props.ts
+++ b/src/slider/props.ts
@@ -13,7 +13,7 @@ export default {
   /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
   label: {
     type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
-    default: true,
+    default: false,
   },
   /** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
   marks: {
@@ -38,21 +38,29 @@ export default {
     type: Number,
     default: 1,
   },
+  /** 滑块风格 */
+  theme: {
+    type: String as PropType<TdSliderProps['theme']>,
+    default: 'default' as TdSliderProps['theme'],
+    validator(val: TdSliderProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'capsule'].includes(val);
+    },
+  },
   /** 滑块值 */
   value: {
     type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined,
   },
   modelValue: {
     type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined,
   },
   /** 滑块值，非受控属性 */
   defaultValue: {
     type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
+    default: 0,
   },
   /** 滑块值变化时触发 */
   onChange: Function as PropType<TdSliderProps['onChange']>,
-  /** 结束拖动时触发 */
-  onDragend: Function as PropType<TdSliderProps['onDragend']>,
-  /** 开始拖动时触发 */
-  onDragstart: Function as PropType<TdSliderProps['onDragstart']>,
 };
diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md
new file mode 100644
index 00000000..0a7e7469
--- /dev/null
+++ b/src/slider/slider.en-US.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | false | \- | N
+label | String / Boolean / Slot / Function | false | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+showExtremeValue | Boolean | false | \- | N
+step | Number | 1 | \- | N
+theme | String | default | options：default/capsule | N
+value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
+onDragend | Function |  | Typescript：`() => void`<br/> | N
+onDragstart | Function |  | Typescript：`() => void`<br/> | N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(value: SliderValue)` | \-
+dragend | \- | \-
+dragstart | \- | \-
diff --git a/src/slider/slider.md b/src/slider/slider.md
index 9ff215ab..829069fb 100644
--- a/src/slider/slider.md
+++ b/src/slider/slider.md
@@ -6,23 +6,20 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 disabled | Boolean | false | 是否禁用组件 | N
-label | String / Boolean / Slot / Function | true | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> | SliderMarks` `interface SliderMarks { [mark: number]: string | TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+label | String / Boolean / Slot / Function | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 max | Number | 100 | 滑块范围最大值 | N
 min | Number | 0 | 滑块范围最小值 | N
 range | Boolean | false | 双游标滑块 | N
 showExtremeValue | Boolean | false | 是否边界值 | N
 step | Number | 1 | 步长 | N
-value | Number / Array | - | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number | Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
-defaultValue | Number / Array | - | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number | Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+theme | String | default | 滑块风格。可选项：default/capsule | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
-onDragend | Function |  | TS 类型：`() => void`<br/>结束拖动时触发 | N
-onDragstart | Function |  | TS 类型：`() => void`<br/>开始拖动时触发 | N
 
 ### Slider Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SliderValue)` | 滑块值变化时触发
-dragend | \- | 结束拖动时触发
-dragstart | \- | 开始拖动时触发
diff --git a/src/slider/slider.vue b/src/slider/slider.vue
index 439b28a8..449f1f17 100644
--- a/src/slider/slider.vue
+++ b/src/slider/slider.vue
@@ -1,51 +1,142 @@
 <template>
   <div ref="rootRef" :class="classes">
-    <div v-if="showExtremeValue" :class="`${name}-wrap__value--left`">{{ min }}</div>
-    <div :class="`${name}`" @click="onClick">
-      <!-- 总长度 -->
-      <div ref="barRef" :class="`${name}__bar`"></div>
-      <!-- 滑块长度 -->
-      <div :class="`${name}__track`" :style="trackStyle"></div>
-      <!-- 滑块操作 -->
-      <div
-        v-for="(item, index) in dots"
-        :key="index + 1"
-        :class="handleClass"
-        :style="`left:${getPercentage(item)}%`"
-        @touchstart="onTouchStart($event, item)"
-        @touchmove="onTouchMove($event, index)"
-        @touchend="onTouchEnd($event, index)"
-      ></div>
-      <!-- 刻度内容 -->
-      <div v-if="marksData" :class="`${name}__mark`">
+    <template v-if="!range">
+      <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--min`]">{{
+        label ? getValue(label, min) : min
+      }}</text>
+      <div ref="sliderLine" :class="sliderLineClasses" @click="onClick">
+        <template v-if="state.isScale">
+          <div
+            v-for="(item, index) in state.scaleArray"
+            :key="index"
+            :style="`left: ${item.left}px; transform: translateX(-50%);`"
+            :class="[
+              `${name}__scale-item`,
+              `${name}__scale-item--${theme}`,
+              {
+                [`${name}__scale-item--active`]: Number(value) >= item.val,
+                [`${name}__scale-item--disabled`]: disabled,
+                [`${name}__scale-item--hidden`]:
+                  ((index == 0 || index == state.scaleArray.length - 1) && theme == 'capsule') || value == item.val,
+              },
+            ]"
+          >
+            <div v-if="state.scaleTextArray.length" :class="[`${name}__scale-desc`, `${name}__scale-desc--${theme}`]">
+              {{ state.scaleTextArray[index] }}
+            </div>
+          </div>
+        </template>
         <div
-          v-for="(v, k) in marksData"
-          :key="k"
-          :class="`${name}__mark-text t-is-${value && value > v[0] ? 'active' : ''}`"
-          :style="`left: ${getPercentage(v[0])}%`"
+          :class="[
+            `${name}__line`,
+            `${name}__line--${theme}`,
+            `${name}__line--single`,
+            { [`${name}__line--disabled`]: disabled },
+          ]"
+          :style="`width: ${lineBarWidth}px`"
         >
-          {{ typeof v[1] === 'function' ? v[1](v[0]) : v[1] }}
+          <div
+            ref="singleDot"
+            :class="`${name}__dot`"
+            @touchmove="onSingleLineTap"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+            <div v-if="label" :class="[`${name}__dot-value`, { [`${name}__dot-value--sr-only`]: !label }]">
+              {{ getValue(label, value) || value }}
+            </div>
+            <div :class="`${name}__dot-slider`"></div>
+          </div>
         </div>
       </div>
-    </div>
-    <div v-if="labelContent" :class="`${name}-wrap__value`">
-      <t-node :content="labelContent"></t-node>
-    </div>
-    <div v-if="showExtremeValue" :class="`${name}-wrap__value`">{{ max }}</div>
+      <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--max`]">
+        {{ label ? getValue(label, max) : max }}
+      </text>
+    </template>
+    <template v-if="range">
+      <text v-if="showExtremeValue" :class="[`${name}__range-extreme`, `${name}__range-extreme--min`]">{{ min }}</text>
+      <div ref="sliderLine" :class="sliderLineClasses" @click="onLineClick">
+        <template v-if="state.isScale">
+          <div
+            v-for="(item, index) in state.scaleArray"
+            :key="index"
+            :style="`left: ${item.left}px; transform: translateX(-50%);`"
+            :class="[
+              `${name}__scale-item`,
+              `${name}__scale-item--${theme}`,
+              {
+                [`${name}__scale-item--active`]: state.dotTopValue[1] >= item.val && item.val >= state.dotTopValue[0],
+                [`${name}__scale-item--disabled`]: disabled,
+                [`${name}__scale-item--hidden`]:
+                  ((index == 0 || index == state.scaleArray.length - 1) && theme == 'capsule') || value == item.val,
+              },
+            ]"
+          >
+            <div v-if="state.scaleTextArray.length" :class="[`${name}__scale-desc`, `${name}__scale-desc--${theme}`]">
+              {{ state.scaleTextArray[index] }}
+            </div>
+          </div>
+        </template>
+        <div
+          :class="[`${name}__line`, `${name}__line--${theme}`, { [`${name}__line--disabled`]: disabled }]"
+          :style="`left: ${state.lineLeft}px; right: ${state.lineRight}px`"
+        >
+          <div
+            ref="leftDot"
+            :class="[`${name}__dot`, `${name}__dot--left`]"
+            @touchmove="onTouchMoveLeft"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+            <div v-if="label" :class="[`${name}__dot-value`, { [`${name}__dot-value--sr-only`]: !label }]">
+              {{ getValue(label, state.dotTopValue[0]) || state.dotTopValue[0] }}
+            </div>
+            <div :class="`${name}__dot-slider`"></div>
+          </div>
+          <div
+            ref="rightDot"
+            :class="[`${name}__dot`, `${name}__dot--right`]"
+            @touchmove="onTouchMoveRight"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
+          >
+            <div v-if="label" :class="[`${name}__dot-value`, { [`${name}__dot-value--sr-only`]: !label }]">
+              {{ getValue(label, state.dotTopValue[1]) || state.dotTopValue[1] }}
+            </div>
+            <div :class="`${name}__dot-slider`"></div>
+          </div>
+        </div>
+      </div>
+      <text v-if="showExtremeValue" :class="[`${name}__value`, `${name}__value--max`]">{{ max }}</text>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance } from 'vue';
+import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance, watch, onMounted } from 'vue';
 import config from '../config';
 import props from './props';
 import { useVModel } from '../shared/useVModel';
-import { renderTNode, TNode } from '../shared';
+import { renderTNode, useEmitEvent } from '../shared';
+import { trimSingleValue, trimValue } from './tool';
+import type { SliderValue } from './type';
 import { useFormDisabled } from '../form/hooks';
 
 const { prefix } = config;
 const name = `${prefix}-slider`;
-const { isArray } = Array;
+
+type dataType = {
+  initialLeft: number;
+  initialRight: number;
+  maxRange: number;
+  lineLeft: number;
+  lineRight: number;
+  dotTopValue: number[];
+  blockSize: number;
+  isScale: boolean;
+  scaleArray: any[];
+  scaleTextArray: any[];
+};
 
 export interface TouchData {
   startValue: number;
@@ -57,208 +148,298 @@ export interface TouchData {
 
 export default defineComponent({
   name,
-  components: { TNode },
   props,
-  emits: ['drag-start', 'drag-end', 'update:modelValue', 'change'],
+  emits: ['change', 'update:value', 'update:modelValue'],
   setup(props, context) {
     const disabled = useFormDisabled();
-    const rootRef = ref<HTMLElement | null>(null);
-    const barRef = ref<HTMLElement | null>(null);
+    const sliderLine = ref<HTMLElement>();
+    const leftDot = ref<HTMLElement>();
+    const rightDot = ref<HTMLElement>();
+    const state: dataType = reactive({
+      initialLeft: 0,
+      initialRight: 0,
+      maxRange: 0,
+      lineLeft: 0,
+      lineRight: 0,
+      dotTopValue: [0, 0],
+      blockSize: 20,
+      isScale: false,
+      scaleArray: [],
+      scaleTextArray: [],
+    });
+    const emitEvent = useEmitEvent(props, context.emit);
+
     const defaultValue = props.defaultValue || props.min;
-    const { value, modelValue, max, min } = toRefs(props);
+    const { value, modelValue, label, max, min, theme, marks, step, range } = toRefs(props);
     const [innerValue, setInnerValue] = useVModel(value, modelValue, defaultValue, props.onChange);
+
+    watch(
+      () => innerValue.value,
+      (val: any) => {
+        if (range.value) {
+          const left = (state.maxRange * (val[0] - Number(min.value))) / (Number(max.value) - Number(min.value));
+          const right = (state.maxRange * (Number(max.value) - val[1])) / (Number(max.value) - Number(min.value));
+          // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
+          setLineStyle(left, right);
+        } else {
+          setSingleBarWidth(val as number);
+        }
+      },
+    );
+
     const internalInstance = getCurrentInstance();
     const labelContent = computed(
       () =>
-        !props.range &&
-        props.label &&
+        !range.value &&
+        label.value &&
         (typeof renderTNode(internalInstance, 'label') === 'object'
           ? renderTNode(internalInstance, 'label')
           : `${innerValue.value}`),
     );
 
-    const isRange = computed(() => {
-      return props.range && isArray(innerValue.value) && innerValue.value.length === 2;
-    });
-    const dots = computed(() => {
-      if (isRange.value) return innerValue.value;
-
-      if (typeof innerValue.value === 'number') return [innerValue.value];
-      return [];
-    });
-
     const classes = computed(() => [
-      `${name}-wrap`,
+      `${name}`,
       {
-        [`${prefix}-is-disabled`]: disabled.value,
-        [`${prefix}-is-mark`]: props.marks,
-        [`${prefix}-is-value`]: props.showExtremeValue,
+        [`${name}--top`]: label.value || state.scaleTextArray.length,
+        [`${name}--disabled`]: disabled.value,
+        [`${name}--range`]: range.value,
       },
     ]);
-    const handleClass = computed(() => [`${name}__handle`]);
-    const marksData = computed(() => {
-      const sorter = (a: number[], b: number[]) => a[0] - b[0];
-      if (!props.range && props.marks) {
-        if (isArray(props.marks)) {
-          return props.marks.map((val: number) => [val, val]).sort(sorter);
-        }
-        return Object.entries(props.marks)
-          .map(([key, value]) => [parseInt(key, 10), value])
-          .sort(sorter);
+
+    const sliderLineClasses = computed(() => [
+      `${name}__bar`,
+      `${name}__bar--${theme.value}`,
+      {
+        [`${name}__bar--disabled`]: disabled.value,
+        [`${name}__bar--marks`]: state.isScale && theme.value === 'capsule',
+      },
+    ]);
+
+    const lineBarWidth = ref<number>();
+    const setSingleBarWidth = (value: number) => {
+      const halfBlock = theme.value === 'capsule' ? Number(state.blockSize) / 2 : 0;
+      const percentage = (Number(value) - Number(min.value)) / (Number(max.value) - Number(min.value));
+      lineBarWidth.value = percentage * state.maxRange + halfBlock;
+    };
+
+    onMounted(() => {
+      getInitialStyle();
+      if (range.value) {
+        const left = // @ts-ignore
+          (state.maxRange * (innerValue.value[0] - Number(min.value))) / (Number(max.value) - Number(min.value));
+        const right = // @ts-ignore
+          (state.maxRange * (Number(max.value) - innerValue.value[1])) / (Number(max.value) - Number(min.value));
+        // 因为要计算点相对于线的绝对定位，所以要取整条线的长度而非可滑动的范围
+        setLineStyle(left, right);
+      } else {
+        setSingleBarWidth(innerValue.value as number);
+      }
+      if (marks.value) {
+        handleMask(marks.value);
       }
-      return [];
     });
 
-    const dragStatus = ref<string>('');
-    const touchData = reactive<TouchData>({
-      startValue: 0,
-      newValue: 0,
-      startX: 0,
-      deltaX: 0,
-      offsetX: 0,
-    });
+    const setLineStyle = (left: number, right: number) => {
+      const halfBlock = (theme.value as string) === 'capsule' ? Number(state.blockSize) / 2 : 0;
+      const [a, b] = innerValue.value as any;
+      const cut = (v: any) => parseInt(v, 10);
+
+      state.dotTopValue = [a, b];
+
+      if (left + right <= state.maxRange) {
+        state.lineLeft = cut(left + halfBlock);
+        state.lineRight = cut(right + halfBlock);
+      } else {
+        state.lineLeft = cut(state.maxRange + halfBlock - right);
+        state.lineRight = cut(state.maxRange - left + halfBlock * 1.5);
+      }
+    };
 
-    function onTouchStart(event: TouchEvent, value: number) {
-      if (disabled.value) {
-        return;
+    const getInitialStyle = () => {
+      const line = sliderLine.value?.getBoundingClientRect() as DOMRect;
+      const halfBlock = Number(state.blockSize) / 2;
+      const maxRange = line.right - line.left;
+      state.maxRange = maxRange;
+      state.initialLeft = line.left;
+      state.initialRight = line.right;
+      if (theme.value === 'capsule') {
+        state.maxRange = maxRange - Number(state.blockSize) - 6; // 6 是边框宽度
+        state.initialLeft -= halfBlock;
+        state.initialRight -= halfBlock;
       }
-      event.stopPropagation();
-      event.preventDefault();
-      touchData.deltaX = 0;
-      touchData.offsetX = 0;
-      touchData.startX = event.touches[0].clientX;
-      touchData.startValue = format(value);
-      dragStatus.value = 'start';
-    }
-
-    function onTouchMove(event: TouchEvent, index: number) {
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {};
+
+    // 点击滑动条的事件
+    const onSingleLineTap = (e: TouchEvent | MouseEvent) => {
       if (disabled.value) return;
-      if (!barRef.value) return;
+      const value = getSingleChangeValue(e as any);
+      setInnerValue(value);
+      triggerValue(value);
+    };
+
+    const getSingleChangeValue = (e: TouchEvent) => {
+      const [touch] = e.changedTouches;
+      const { pageX } = touch;
+      const currentLeft = pageX - state.initialLeft;
+      return getChangeValue(currentLeft);
+    };
 
-      event.stopPropagation();
-      event.preventDefault();
-      if (dragStatus.value === 'start') {
-        context.emit('drag-start');
+    const getChangeValue = (currentLeft: number) => {
+      let value = 0;
+      if (currentLeft <= 0) {
+        value = Number(min.value);
+      } else if (currentLeft >= state.maxRange) {
+        value = Number(max.value);
+      } else {
+        value = Math.round(
+          (currentLeft / state.maxRange) * (Number(max.value) - Number(min.value)) + Number(min.value),
+        );
       }
-      const touch = event.touches[0];
-      touchData.deltaX = touch.clientX - touchData.startX;
-      touchData.offsetX = Math.abs(touchData.deltaX);
-      dragStatus.value = 'dragging';
-
-      const rect = barRef.value.getBoundingClientRect();
-      const delta = touchData.deltaX;
-      const total = rect.width;
-      const diff = (delta / total) * (props.max - props.min);
-
-      touchData.newValue = touchData.startValue + diff;
-      updateValue(touchData.newValue, index);
-    }
-
-    function onTouchEnd(event: TouchEvent, index: number) {
-      if (disabled.value) {
-        return;
+      return stepValue(value);
+    };
+
+    const triggerValue = (value: SliderValue) => {
+      emitEvent('change', { value: trimValue(value, props) });
+    };
+
+    const stepValue = (value: number): number => {
+      if (Number(step.value) < 1 || Number(step.value) > Number(max.value) - Number(min.value)) return value;
+      const closestStep = trimSingleValue(
+        Math.round(value / Number(step.value)) * Number(step.value),
+        Number(min.value),
+        Number(max.value),
+      );
+
+      return closestStep as number;
+    };
+
+    const getValue = (label: any, value: any) => {
+      const REGEXP = /[$][{value}]{7}/;
+      if (label && label === 'true') return value;
+      if (REGEXP.test(label)) return label.replace(REGEXP, value);
+    };
+
+    const handleMask = (marks: any) => {
+      const calcPos = (arr: number[]) => {
+        const margin = (theme.value as any) === 'capsule' ? state.blockSize / 2 : 0;
+        return arr.map((item) => ({
+          val: item,
+          left: Math.round((item / 100) * state.maxRange) + margin,
+        }));
+      };
+      if (marks?.length && Array.isArray(marks)) {
+        state.isScale = true;
+        state.scaleArray = calcPos(marks);
+        state.scaleTextArray = [];
       }
-      event.stopPropagation();
-      event.preventDefault();
 
-      if (dragStatus.value === 'dragging') {
-        updateValue(touchData.newValue, index, true);
-        context.emit('drag-end');
+      if (Object.prototype.toString.call(marks) === '[object Object]') {
+        const scaleArray = Object.keys(marks).map((item) => Number(item));
+        const scaleTextArray = scaleArray.map((item) => marks[item]);
+        state.isScale = scaleArray.length > 0;
+        state.scaleArray = calcPos(scaleArray);
+        state.scaleTextArray = scaleTextArray;
       }
+    };
+
+    /**
+     * 将位置转换为值
+     *
+     * @param {number} posValue 位置数据
+     * @param {(0 | 1)} dir 方向： 0-left， 1-right
+     * @return  {number}
+     * @memberof Slider
+     */
+    const convertPosToValue = (posValue: number, dir: 0 | 1): number => {
+      return dir === 0
+        ? (posValue / state.maxRange) * (Number(max.value) - Number(min.value)) + Number(min.value)
+        : Number(max.value) - (posValue / state.maxRange) * (Number(max.value) - Number(min.value));
+    };
 
-      dragStatus.value = '';
-    }
+    const onTouchMoveLeft = (e: TouchEvent) => {
+      if (disabled.value) return;
+      const [touch] = e.changedTouches;
+      const { pageX } = touch;
+      const currentLeft = pageX - state.initialLeft;
+      const newData = [...(innerValue.value as number[])];
+      const leftValue = convertPosToValue(currentLeft, 0);
+      newData[0] = stepValue(leftValue);
+      setInnerValue(newData);
+      triggerValue(newData);
+    };
 
-    function onClick(event: MouseEvent) {
-      event.stopPropagation();
+    const onTouchMoveRight = (e: TouchEvent) => {
+      if (disabled.value) return;
+      const [touch] = e.changedTouches;
+      const { pageX } = touch;
+      const currentRight = -(pageX - state.initialRight);
+      const newData = [...(innerValue.value as number[])];
+      const rightValue = convertPosToValue(currentRight, 1);
+      newData[1] = stepValue(rightValue);
+      setInnerValue(newData);
+      triggerValue(newData);
+    };
 
+    const onClick = (e: MouseEvent) => {
+      e.stopPropagation();
       if (disabled.value) return;
-      if (!barRef.value) return;
+      if (!sliderLine.value) return;
+      const currentLeft = e.clientX - state.initialLeft;
+      const value = getChangeValue(currentLeft);
+      setInnerValue(value);
+      triggerValue(value);
+    };
 
-      const rect = barRef.value.getBoundingClientRect();
-      const delta = event.clientX - rect.left;
-      const total = rect.width;
-      const current = +props.min + (delta / total) * (props.max - props.min);
+    const onLineClick = (e: MouseEvent) => {
+      e.stopPropagation();
+      if (disabled.value) return;
+      const halfBlock = theme.value === 'capsule' ? Number(state.blockSize) / 2 : 0;
+      const currentLeft = e.clientX - state.initialLeft;
+      if (currentLeft < 0 || currentLeft > state.maxRange + Number(state.blockSize)) return;
 
-      let index = 0;
-      if (props.range && innerValue.value) {
-        if (Math.abs(current - innerValue.value[0]) > Math.abs(current - innerValue.value[1])) {
-          index = 1;
-        }
-      }
+      const leftDotValue = leftDot.value?.getBoundingClientRect() as DOMRect;
+      const rightDotValue = rightDot.value?.getBoundingClientRect() as DOMRect;
+      // 点击处-halfblock 与 leftDot左侧的距离（绝对值）
+      const distanceLeft = Math.abs(e.clientX - leftDotValue.left - halfBlock);
+      // 点击处-halfblock 与 rightDot左侧的距离（绝对值）
+      const distanceRight = Math.abs(rightDotValue.left - e.clientX + halfBlock);
+      // 哪个绝对值小就移动哪个Dot
+      const isMoveLeft = distanceLeft < distanceRight;
 
-      touchData.startValue = innerValue.value?.[index];
-      updateValue(current, index, true);
-    }
-
-    function format(value: number): number {
-      let current = value;
-      if (!props.range && props.marks) {
-        if (marksData?.value?.length) {
-          let [min] = marksData.value[0];
-          marksData.value.forEach(([marksDataItemValue]) => {
-            if (Math.abs(marksDataItemValue - value) < Math.abs(min - value)) {
-              min = marksDataItemValue;
-            }
-          });
-          current = min;
-        }
-      }
-      return Math.round(Math.max(props.min, Math.min(current, props.max)) / props.step) * props.step;
-    }
-
-    function updateValue(newValue: number, index: number, end = false) {
-      const formatValue = format(newValue);
-      if (props.range && Array.isArray(innerValue.value)) {
-        const tmpValue = [...innerValue.value];
-        tmpValue[index] = formatValue;
-
-        if (end && formatValue !== touchData.startValue) {
-          tmpValue.sort((a, b) => a - b);
-          setInnerValue(tmpValue);
-        } else if (formatValue !== touchData.startValue) {
-          setInnerValue(tmpValue);
-        }
-      } else if (formatValue !== touchData.startValue) {
-        setInnerValue(formatValue);
-      }
-    }
-
-    const getPercentage = (value: number | undefined): number =>
-      ((value ? value - props.min : 0) / (props.max - props.min)) * 100;
-    const trackStyle = computed(() => {
-      if (props.range && isArray(innerValue.value)) {
-        return {
-          left: `${getPercentage(Math.min(innerValue.value[0], innerValue.value[1]))}%`,
-          width: `${getPercentage(Math.abs(innerValue.value[1] - innerValue.value[0]))}%`,
-        };
+      if (isMoveLeft) {
+        // 当前leftdot中心 + 左侧偏移量 = 目标左侧中心距离
+        const left = e.clientX - state.initialLeft;
+        const leftValue = convertPosToValue(left, 0);
+        setInnerValue([stepValue(leftValue), innerValue.value?.[1]]);
+        triggerValue([stepValue(leftValue), innerValue.value?.[1]]);
+      } else {
+        const right = -(e.clientX - state.initialRight);
+        const rightValue = convertPosToValue(right, 1);
+        setInnerValue([innerValue.value?.[0], stepValue(rightValue)]);
+        triggerValue([stepValue(rightValue), innerValue.value?.[1]]);
       }
-      if (!isArray(innerValue.value)) {
-        return {
-          width: `${getPercentage(innerValue.value)}%`,
-        };
-      }
-      return {};
-    });
-
+    };
     return {
-      max,
-      min,
+      state,
       name: ref(name),
-      marksData,
-      rootRef,
-      barRef,
-      dots,
+      sliderLine,
+      leftDot,
+      rightDot,
+      lineBarWidth,
       value: innerValue,
       labelContent,
       classes,
-      handleClass,
-      trackStyle,
-      getPercentage,
-      onTouchStart,
-      onTouchMove,
+      sliderLineClasses,
+      disabled,
       onTouchEnd,
+      onSingleLineTap,
+      onTouchMoveLeft,
+      onTouchMoveRight,
+      getValue,
       onClick,
+      onLineClick,
     };
   },
 });
diff --git a/src/slider/style/index.js b/src/slider/style/index.js
index ec130ce3..586efd57 100644
--- a/src/slider/style/index.js
+++ b/src/slider/style/index.js
@@ -1,1 +1,1 @@
-import '../../_common/style/mobile/components/slider/_index.less';
+import '../../_common/style/mobile/components/slider/v2/_index.less';
diff --git a/src/slider/tool.ts b/src/slider/tool.ts
new file mode 100644
index 00000000..ffe39676
--- /dev/null
+++ b/src/slider/tool.ts
@@ -0,0 +1,48 @@
+/**
+ * 处理单个number的超限和异常
+ * @param {any} value
+ * @param {number} min
+ * @param {number} max
+ * @return {number}
+ */
+export const trimSingleValue = (value: any, min: number, max: number): number => {
+  if (typeof value !== 'number') {
+    return min;
+  }
+  if (value < min) {
+    return min;
+  }
+
+  if (value > max) {
+    return max;
+  }
+
+  return value;
+};
+
+/**
+ * 处理超限和异常value
+ * @param value
+ * @param props
+ * @returns
+ */
+export const trimValue = (value: number | number[], props: any): number | number[] => {
+  const { min, max, range } = props;
+
+  if (range && Array.isArray(value)) {
+    value[0] = trimSingleValue(value[0], min, max);
+    value[1] = trimSingleValue(value[1], min, max);
+
+    return value[0] <= value[1] ? value : [value[1], value[0]];
+  }
+
+  if (range) {
+    return [min, max];
+  }
+
+  if (!range) {
+    return trimSingleValue(value, min, max);
+  }
+
+  return [];
+};
diff --git a/src/slider/type.ts b/src/slider/type.ts
index f171765b..7296c0d2 100644
--- a/src/slider/type.ts
+++ b/src/slider/type.ts
@@ -14,7 +14,7 @@ export interface TdSliderProps {
   disabled?: boolean;
   /**
    * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
-   * @default true
+   * @default false
    */
   label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
   /**
@@ -46,30 +46,30 @@ export interface TdSliderProps {
    * @default 1
    */
   step?: number;
+  /**
+   * 滑块风格
+   * @default default
+   */
+  theme?: 'default' | 'capsule';
   /**
    * 滑块值
+   * @default 0
    */
   value?: SliderValue;
   /**
    * 滑块值，非受控属性
+   * @default 0
    */
   defaultValue?: SliderValue;
   /**
    * 滑块值
+   * @default 0
    */
   modelValue?: SliderValue;
   /**
    * 滑块值变化时触发
    */
   onChange?: (value: SliderValue) => void;
-  /**
-   * 结束拖动时触发
-   */
-  onDragend?: () => void;
-  /**
-   * 开始拖动时触发
-   */
-  onDragstart?: () => void;
 }
 
 export interface SliderMarks {


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,
         },
diff --git a/src/fab/__test__/__snapshots__/demo.test.jsx.snap b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
index 1fd98d06..d42123e0 100644
--- a/src/fab/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/demo.test.jsx.snap
@@ -1,56 +1,91 @@
 // Vitest Snapshot v1
 
-exports[`Fab > Fab displayVue demo works fine 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
-    role="button"
-    style="right: 16px; bottom: 32px;"
-    type="button"
+exports[`Fab > Fab advanceVue demo works fine 1`] = `
+<button
+  aria-disabled="false"
+  class="t-button t-button--size-large t-button--base t-button--primary t-button--round t-fab"
+  role="button"
+  style="right: 16px; bottom: 32px;"
+  type="button"
+>
+  <svg
+    class="t-icon t-icon-add"
+    fill="none"
+    height="1em"
+    style="font-size: 24px;"
+    viewBox="0 0 16 16"
+    width="1em"
   >
-    <!---->
-    <span
-      class="t-button__content"
-    >
-      
-      <svg
-        class="t-icon t-icon-add"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <!--v-if-->
-      
-    </span>
-    <!---->
-  </button>
-</div>
+    <path
+      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  <span
+    class="t-button__content"
+  >
+    
+    按钮文字
+    
+  </span>
+  <!---->
+</button>
+`;
+
+exports[`Fab > Fab baseVue demo works fine 1`] = `
+<button
+  aria-disabled="false"
+  class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
+  role="button"
+  style="right: 16px; bottom: 32px;"
+  type="button"
+>
+  <svg
+    class="t-icon t-icon-add"
+    fill="none"
+    height="1em"
+    style="font-size: 24px;"
+    viewBox="0 0 16 16"
+    width="1em"
+  >
+    <path
+      d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  <span
+    class="t-button__content"
+  >
+    
+    
+    
+  </span>
+  <!---->
+</button>
 `;
 
 exports[`Fab > Fab mobileVue demo works fine 1`] = `
 <div
   class="tdesign-mobile-demo"
+  data-v-38a07a02=""
 >
   <h1
     class="title"
+    data-v-38a07a02=""
   >
     Fab 悬浮按钮
   </h1>
   <p
     class="summary"
+    data-v-38a07a02=""
   >
     当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
   </p>
   <div
     class="tdesign-mobile-demo-block"
+    data-v-38a07a02=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
@@ -58,7 +93,7 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        01 类型
+        01 组件类型
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
@@ -67,119 +102,98 @@ exports[`Fab > Fab mobileVue demo works fine 1`] = `
       </p>
     </div>
     <div
-      class="tdesign-mobile-demo-block__slot"
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
       
-      <div
-        class="toast-demo"
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-38a07a02=""
+        role="button"
+        type="button"
       >
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          role="button"
-          type="button"
-        >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            基础使用
-            
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle t-button--block"
-          role="button"
-          type="button"
+        <!---->
+        <span
+          class="t-button__content"
         >
-          <!---->
-          <span
-            class="t-button__content"
-          >
-            
-            进阶使用
-            
-          </span>
-          <!---->
-        </button>
-      </div>
+          
+          纯图标悬浮按钮
+          
+        </span>
+        <!---->
+      </button>
       
     </div>
   </div>
-  <div>
-    <button
-      aria-disabled="false"
-      class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab t-fab--icononly"
-      role="button"
-      style="right: 16px; bottom: 32px;"
-      type="button"
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-38a07a02=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        图标加文字悬浮按钮
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
     >
-      <!---->
-      <span
-        class="t-button__content"
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-38a07a02=""
+        role="button"
+        type="button"
       >
-        
-        <svg
-          class="t-icon t-icon-add"
-          fill="none"
-          height="1em"
-          viewBox="0 0 16 16"
-          width="1em"
+        <!---->
+        <span
+          class="t-button__content"
         >
-          <path
-            d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-        <!--v-if-->
-        
-      </span>
-      <!---->
-    </button>
+          
+          图标加文字悬浮按钮
+          
+        </span>
+        <!---->
+      </button>
+      
+    </div>
   </div>
-  <!--v-if-->
-</div>
-`;
-
-exports[`Fab > Fab textVue demo works fine 1`] = `
-<div>
   <button
     aria-disabled="false"
-    class="t-button t-button--size-middle t-button--outline t-button--primary t-button--round t-fab"
+    class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
+    data-v-38a07a02=""
     role="button"
     style="right: 16px; bottom: 32px;"
     type="button"
   >
-    <!---->
+    <svg
+      class="t-icon t-icon-add"
+      fill="none"
+      height="1em"
+      style="font-size: 24px;"
+      viewBox="0 0 16 16"
+      width="1em"
+    >
+      <path
+        d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
+        fill="currentColor"
+        fill-opacity="0.9"
+      />
+    </svg>
     <span
       class="t-button__content"
     >
       
-      <svg
-        class="t-icon t-icon-add"
-        fill="none"
-        height="1em"
-        viewBox="0 0 16 16"
-        width="1em"
-      >
-        <path
-          d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z"
-          fill="currentColor"
-          fill-opacity="0.9"
-        />
-      </svg>
-      <span
-        class="t-fab__text"
-      >
-        按钮文字
-      </span>
+      
       
     </span>
     <!---->
   </button>
+  <!--v-if-->
 </div>
 `;
diff --git a/src/fab/__test__/__snapshots__/index.test.jsx.snap b/src/fab/__test__/__snapshots__/index.test.jsx.snap
index 1f98d740..16ef8c4f 100644
--- a/src/fab/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/fab/__test__/__snapshots__/index.test.jsx.snap
@@ -3,32 +3,31 @@
 exports[`fab > slots > : icon 1`] = `
 <button
   aria-disabled="false"
-  class="t-button t-button--size-middle t-button--base t-button--primary t-button--round t-fab"
+  class="t-button t-button--size-large t-button--base t-button--primary t-button--circle t-fab"
   role="button"
   style="right: 16px; bottom: 32px;"
   type="button"
 >
-  <!---->
+  
+  <svg
+    class="t-icon t-icon-app"
+    fill="none"
+    height="1em"
+    viewBox="0 0 16 16"
+    width="1em"
+  >
+    <path
+      d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
+      fill="currentColor"
+      fill-opacity="0.9"
+    />
+  </svg>
+  
   <span
     class="t-button__content"
   >
     
     
-    <svg
-      class="t-icon t-icon-app"
-      fill="none"
-      height="1em"
-      viewBox="0 0 16 16"
-      width="1em"
-    >
-      <path
-        d="M11.25 1.75a3 3 0 100 6 3 3 0 000-6zm-2 3a2 2 0 114 0 2 2 0 01-4 0zM2 3a1 1 0 011-1h3.5a1 1 0 011 1v3.5a1 1 0 01-1 1H3a1 1 0 01-1-1V3zm1 0v3.5h3.5V3H3zM2 9.5a1 1 0 011-1h3.5a1 1 0 011 1V13a1 1 0 01-1 1H3a1 1 0 01-1-1V9.5zm1 0V13h3.5V9.5H3zM8.5 9.5a1 1 0 011-1H13a1 1 0 011 1V13a1 1 0 01-1 1H9.5a1 1 0 01-1-1V9.5zm1 3.5H13V9.5H9.5V13z"
-        fill="currentColor"
-        fill-opacity="0.9"
-      />
-    </svg>
-    
-    <!--v-if-->
     
   </span>
   <!---->
diff --git a/src/fab/__test__/demo.test.jsx b/src/fab/__test__/demo.test.jsx
index 1ce7a0cb..7d900465 100644
--- a/src/fab/__test__/demo.test.jsx
+++ b/src/fab/__test__/demo.test.jsx
@@ -3,14 +3,14 @@
  */
 
 import { mount } from '@vue/test-utils';
-import displayVue from '@/fab/demos/display.vue';
+import advanceVue from '@/fab/demos/advance.vue';
+import baseVue from '@/fab/demos/base.vue';
 import mobileVue from '@/fab/demos/mobile.vue';
-import textVue from '@/fab/demos/text.vue';
 
 const mapper = {
-  displayVue,
+  advanceVue,
+  baseVue,
   mobileVue,
-  textVue,
 };
 
 describe('Fab', () => {
diff --git a/src/fab/__test__/index.test.jsx b/src/fab/__test__/index.test.jsx
index 4806ee47..1e425c58 100644
--- a/src/fab/__test__/index.test.jsx
+++ b/src/fab/__test__/index.test.jsx
@@ -18,7 +18,7 @@ describe('fab', () => {
       const wrapper = mount(Fab, {
         props: { text },
       });
-      const textContainer = wrapper.find('.t-fab__text');
+      const textContainer = wrapper.find('.t-button__content');
       expect(textContainer.text()).toBe(text);
     });
 
diff --git a/src/loading/__test__/__snapshots__/demo.test.jsx.snap b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
index 742501f8..a8e5b9db 100644
--- a/src/loading/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/loading/__test__/__snapshots__/demo.test.jsx.snap
@@ -916,38 +916,31 @@ exports[`Loading > Loading mobileVue demo works fine 1`] = `
           data-v-0fadab4c=""
         >
           <div
-            class="t-slider-wrap"
+            class="t-slider"
             data-v-0fadab4c=""
           >
+            
             <!--v-if-->
             <div
-              class="t-slider"
+              class="t-slider__bar t-slider__bar--default"
             >
-              <!-- 总长度 -->
-              <div
-                class="t-slider__bar"
-              />
-              <!-- 滑块长度 -->
-              <div
-                class="t-slider__track"
-                style="width: 50%;"
-              />
-              <!-- 滑块操作 -->
-              
+              <!--v-if-->
               <div
-                class="t-slider__handle"
-                style="left: 50%;"
-              />
-              
-              <!-- 刻度内容 -->
-              <div
-                class="t-slider__mark"
+                class="t-slider__line t-slider__line--default t-slider__line--single"
+                style=""
               >
-                
-                
+                <div
+                  class="t-slider__dot"
+                >
+                  <!--v-if-->
+                  <div
+                    class="t-slider__dot-slider"
+                  />
+                </div>
               </div>
             </div>
             <!--v-if-->
+            
             <!--v-if-->
           </div>
         </div>
@@ -1147,38 +1140,31 @@ exports[`Loading > Loading speedVue demo works fine 1`] = `
     data-v-0fadab4c=""
   >
     <div
-      class="t-slider-wrap"
+      class="t-slider"
       data-v-0fadab4c=""
     >
+      
       <!--v-if-->
       <div
-        class="t-slider"
+        class="t-slider__bar t-slider__bar--default"
       >
-        <!-- 总长度 -->
+        <!--v-if-->
         <div
-          class="t-slider__bar"
-        />
-        <!-- 滑块长度 -->
-        <div
-          class="t-slider__track"
-          style="width: 50%;"
-        />
-        <!-- 滑块操作 -->
-        
-        <div
-          class="t-slider__handle"
-          style="left: 50%;"
-        />
-        
-        <!-- 刻度内容 -->
-        <div
-          class="t-slider__mark"
+          class="t-slider__line t-slider__line--default t-slider__line--single"
+          style=""
         >
-          
-          
+          <div
+            class="t-slider__dot"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
         </div>
       </div>
       <!--v-if-->
+      
       <!--v-if-->
     </div>
   </div>
diff --git a/src/slider/__test__/__snapshots__/demo.test.jsx.snap b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
index 7489ca5c..751f950a 100644
--- a/src/slider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/slider/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,556 +2,840 @@
 
 exports[`Slider > Slider baseVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap"
+  class="wrapper"
+  data-v-5350d6f5=""
 >
-  <!--v-if-->
   <div
     class="t-slider"
+    data-v-5350d6f5=""
   >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 0%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 0%;"
-    />
-    
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
-    >
-      
-      
-    </div>
-  </div>
-  <!--v-if-->
-  <!--v-if-->
-</div>
-`;
-
-exports[`Slider > Slider disableVue demo works fine 1`] = `
-<div
-  class="t-slider-wrap t-is-disabled"
->
-  <!--v-if-->
-  <div
-    class="t-slider"
-  >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 0%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 0%;"
-    />
-    
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
-    >
-      
-      
-    </div>
-  </div>
-  <!--v-if-->
-  <!--v-if-->
-</div>
-`;
-
-exports[`Slider > Slider markVue demo works fine 1`] = `
-<div
-  class="t-slider-wrap t-is-mark"
->
-  <!--v-if-->
-  <div
-    class="t-slider"
-  >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 50%;"
-    />
-    <!-- 滑块操作 -->
     
+    <!--v-if-->
     <div
-      class="t-slider__handle"
-      style="left: 50%;"
-    />
-    
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
+      class="t-slider__bar t-slider__bar--default"
     >
-      
-      <div
-        class="t-slider__mark-text t-is-active"
-        style="left: 0%;"
-      >
-        小
-      </div>
-      <div
-        class="t-slider__mark-text t-is-"
-        style="left: 50%;"
-      >
-        中
-      </div>
+      <!--v-if-->
       <div
-        class="t-slider__mark-text t-is-"
-        style="left: 100%;"
+        class="t-slider__line t-slider__line--default t-slider__line--single"
+        style=""
       >
-        大
+        <div
+          class="t-slider__dot"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
       </div>
-      
     </div>
+    <!--v-if-->
+    
+    <!--v-if-->
   </div>
-  <!--v-if-->
-  <!--v-if-->
 </div>
 `;
 
-exports[`Slider > Slider mobileVue demo works fine 1`] = `
+exports[`Slider > Slider capsuleVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
-  data-v-98828574=""
+  data-v-app=""
 >
-  <h1
-    class="title"
-    data-v-98828574=""
-  >
-    Slider 滑动选择器
-  </h1>
-  <p
-    class="summary"
-    data-v-98828574=""
-  >
-    用于选择横轴上的数值、区间、档位
-  </p>
+  
   <div
-    class="tdesign-mobile-demo-block"
-    data-v-98828574=""
+    class="wrapper"
+    data-v-a6c0268e=""
   >
     <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        01 类型
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        基础滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
+      class="t-slider"
+      data-v-a6c0268e=""
     >
       
+      <!--v-if-->
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__line t-slider__line--capsule t-slider__line--single"
+          style=""
         >
-          <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__dot"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
+            <!--v-if-->
             <div
-              class="t-slider__handle"
-              style="left: 0%;"
+              class="t-slider__dot-slider"
             />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              
-            </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
       </div>
+      <!--v-if-->
       
+      <!--v-if-->
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-98828574=""
+    class="wrapper"
+    data-v-a6c0268e=""
   >
     <div
-      class="tdesign-mobile-demo-block__header"
+      class="t-slider t-slider--range"
+      data-v-a6c0268e=""
     >
       <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        带数值滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
       
+      <!--v-if-->
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__line t-slider__line--capsule"
+          style="left: 0px; right: 0px;"
         >
-          <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__dot t-slider__dot--left"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 50%;"
-            />
-            <!-- 滑块操作 -->
-            
+            <!--v-if-->
             <div
-              class="t-slider__handle"
-              style="left: 50%;"
+              class="t-slider__dot-slider"
             />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              
-            </div>
           </div>
           <div
-            class="t-slider-wrap__value"
+            class="t-slider__dot t-slider__dot--right"
           >
-            50
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
           </div>
-          <!--v-if-->
         </div>
       </div>
+      <!--v-if-->
       
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-98828574=""
+    class="wrapper"
+    data-v-a6c0268e=""
   >
     <div
-      class="tdesign-mobile-demo-block__header"
+      class="t-slider t-slider--top t-slider--range"
+      data-v-a6c0268e=""
     >
       <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        起始非零滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
       
+      <!--v-if-->
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider__line t-slider__line--capsule"
+          style="left: 0px; right: 0px;"
         >
-          <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__dot t-slider__dot--left"
           >
-            <!-- 总长度 -->
             <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
             <div
-              class="t-slider__handle"
-              style="left: 0%;"
+              class="t-slider__dot-slider"
             />
-            
-            <!-- 刻度内容 -->
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
             <div
-              class="t-slider__mark"
+              class="t-slider__dot-value"
             >
-              
-              
+              0
             </div>
+            <div
+              class="t-slider__dot-slider"
+            />
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
       </div>
+      <!--v-if-->
       
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-98828574=""
+    class="wrapper"
+    data-v-a6c0268e=""
   >
     <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        带刻度滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
+      class="t-slider"
+      data-v-a6c0268e=""
     >
       
+      <!--v-if-->
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-mark"
-          data-v-98828574=""
+          class="t-slider__line t-slider__line--capsule t-slider__line--single"
+          style=""
         >
-          <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__dot"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 50%;"
-            />
-            <!-- 滑块操作 -->
-            
+            <!--v-if-->
             <div
-              class="t-slider__handle"
-              style="left: 50%;"
+              class="t-slider__dot-slider"
             />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              <div
-                class="t-slider__mark-text t-is-active"
-                style="left: 0%;"
-              >
-                小
-              </div>
-              <div
-                class="t-slider__mark-text t-is-"
-                style="left: 50%;"
-              >
-                中
-              </div>
-              <div
-                class="t-slider__mark-text t-is-"
-                style="left: 100%;"
-              >
-                大
-              </div>
-              
-            </div>
           </div>
-          <!--v-if-->
-          <!--v-if-->
         </div>
       </div>
+      <!--v-if-->
       
+      <!--v-if-->
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-    data-v-98828574=""
+    class="wrapper"
+    data-v-a6c0268e=""
   >
     <div
-      class="tdesign-mobile-demo-block__header"
+      class="t-slider t-slider--range"
+      data-v-a6c0268e=""
     >
       <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        区间滑动选择器
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
-    >
       
+      <!--v-if-->
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider__bar t-slider__bar--capsule"
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-value"
-          data-v-98828574=""
+          class="t-slider__line t-slider__line--capsule"
+          style="left: 0px; right: 0px;"
         >
           <div
-            class="t-slider-wrap__value--left"
-          >
-            0
-          </div>
-          <div
-            class="t-slider"
+            class="t-slider__dot t-slider__dot--left"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="left: 30%; width: 40%;"
-            />
-            <!-- 滑块操作 -->
-            
-            <div
-              class="t-slider__handle"
-              style="left: 30%;"
-            />
+            <!--v-if-->
             <div
-              class="t-slider__handle"
-              style="left: 70%;"
+              class="t-slider__dot-slider"
             />
-            
-            <!-- 刻度内容 -->
-            <div
-              class="t-slider__mark"
-            >
-              
-              
-            </div>
           </div>
-          <!--v-if-->
           <div
-            class="t-slider-wrap__value"
+            class="t-slider__dot t-slider__dot--right"
           >
-            100
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
           </div>
         </div>
       </div>
+      <!--v-if-->
       
     </div>
   </div>
+  
+</div>
+`;
+
+exports[`Slider > Slider disabledVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
   <div
-    class="tdesign-mobile-demo-block"
-    data-v-98828574=""
+    class="wrapper"
+    data-v-53635720=""
   >
     <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        02 状态
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        滑动选择器禁用状态
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot"
+      class="t-slider t-slider--disabled"
+      data-v-53635720=""
     >
       
+      <!--v-if-->
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
       >
+        <!--v-if-->
         <div
-          class="t-slider-wrap t-is-disabled"
-          data-v-98828574=""
+          class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
+          style=""
         >
-          <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__dot"
           >
-            <!-- 总长度 -->
+            <!--v-if-->
             <div
-              class="t-slider__bar"
+              class="t-slider__dot-slider"
             />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      
+      <!--v-if-->
+    </div>
+  </div>
+  <div
+    class="wrapper"
+    data-v-53635720=""
+  >
+    <div
+      class="t-slider t-slider--top t-slider--disabled t-slider--range"
+      data-v-53635720=""
+    >
+      <!--v-if-->
+      
+      <text
+        class="t-slider__range-extreme t-slider__range-extreme--min"
+      >
+        0
+      </text>
+      <div
+        class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default t-slider__line--disabled"
+          style="left: 0px; right: 0px;"
+        >
+          <div
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
             />
-            <!-- 滑块操作 -->
-            
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
+      </div>
+      <text
+        class="t-slider__value t-slider__value--max"
+      >
+        100
+      </text>
+      
+    </div>
+  </div>
+  <div
+    class="wrapper"
+    data-v-53635720=""
+  >
+    <div
+      class="t-slider t-slider--disabled t-slider--range"
+      data-v-53635720=""
+    >
+      <!--v-if-->
+      
+      <!--v-if-->
+      <div
+        class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default t-slider__line--disabled"
+          style="left: 0px; right: 0px;"
+        >
+          <div
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`Slider > Slider labelVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    class="wrapper"
+    data-v-61756b00=""
+  >
+    <div
+      class="t-slider t-slider--top"
+      data-v-61756b00=""
+    >
+      
+      <!--v-if-->
+      <div
+        class="t-slider__bar t-slider__bar--default"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default t-slider__line--single"
+          style=""
+        >
+          <div
+            class="t-slider__dot"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              10
+            </div>
             <div
-              class="t-slider__handle"
-              style="left: 0%;"
+              class="t-slider__dot-slider"
             />
-            
-            <!-- 刻度内容 -->
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
+      
+      <!--v-if-->
+    </div>
+  </div>
+  <div
+    class="wrapper"
+    data-v-61756b00=""
+  >
+    <div
+      class="t-slider t-slider--top t-slider--range"
+      data-v-61756b00=""
+    >
+      <!--v-if-->
+      
+      <text
+        class="t-slider__range-extreme t-slider__range-extreme--min"
+      >
+        0
+      </text>
+      <div
+        class="t-slider__bar t-slider__bar--default"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default"
+          style="left: 0px; right: 0px;"
+        >
+          <div
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <div
+              class="t-slider__dot-value"
+            >
+              0
+            </div>
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
+      </div>
+      <text
+        class="t-slider__value t-slider__value--max"
+      >
+        100
+      </text>
+      
+    </div>
+  </div>
+  
+</div>
+`;
+
+exports[`Slider > Slider mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+  data-v-98828574=""
+>
+  <h1
+    class="title"
+    data-v-98828574=""
+  >
+    Slider 滑动选择器
+  </h1>
+  <p
+    class="summary"
+    data-v-98828574=""
+  >
+    用于选择横轴上的数值、区间、档位
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+    data-v-98828574=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        单游标滑块
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="wrapper"
+        data-v-5350d6f5=""
+        data-v-98828574=""
+      >
+        <div
+          class="t-slider"
+          data-v-5350d6f5=""
+        >
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
             <div
-              class="t-slider__mark"
+              class="t-slider__line t-slider__line--default t-slider__line--single"
+              style=""
             >
-              
-              
+              <div
+                class="t-slider__dot"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-98828574=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        双游标滑块
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      <div
+        class="wrapper"
+        data-v-58e1d8c9=""
+        data-v-98828574=""
+      >
+        <div
+          class="t-slider t-slider--range"
+          data-v-58e1d8c9=""
+        >
+          <!--v-if-->
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default"
+              style="left: 0px; right: 0px;"
+            >
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-98828574=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        带数值单游标/双游标滑块
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="wrapper"
+        data-v-61756b00=""
+      >
+        <div
+          class="t-slider t-slider--top"
+          data-v-61756b00=""
+        >
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default t-slider__line--single"
+              style=""
+            >
+              <div
+                class="t-slider__dot"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  10
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-61756b00=""
+      >
+        <div
+          class="t-slider t-slider--top t-slider--range"
+          data-v-61756b00=""
+        >
+          <!--v-if-->
+          
+          <text
+            class="t-slider__range-extreme t-slider__range-extreme--min"
+          >
+            0
+          </text>
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default"
+              style="left: 0px; right: 0px;"
+            >
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <text
+            class="t-slider__value t-slider__value--max"
+          >
+            100
+          </text>
+          
+        </div>
+      </div>
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    data-v-98828574=""
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        带刻度单游标/双游标滑块
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot"
+    >
+      
+      
+      <div
+        class="wrapper"
+        data-v-0f126170=""
+      >
+        <div
+          class="t-slider"
+          data-v-0f126170=""
+        >
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default t-slider__line--single"
+              style=""
+            >
+              <div
+                class="t-slider__dot"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-0f126170=""
+      >
+        <div
+          class="t-slider t-slider--range"
+          data-v-0f126170=""
+        >
+          <!--v-if-->
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--default"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default"
+              style="left: 0px; right: 0px;"
+            >
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
             </div>
           </div>
           <!--v-if-->
-          <!--v-if-->
+          
         </div>
       </div>
       
+      
     </div>
   </div>
   <div
@@ -564,129 +848,376 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        03 规格
+        02 组件状态
       </h2>
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        无标题滑动选择器
+        滑块禁用状态
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="wrapper"
+        data-v-53635720=""
       >
         <div
-          class="t-slider-wrap"
-          data-v-98828574=""
+          class="t-slider t-slider--disabled"
+          data-v-53635720=""
         >
+          
           <!--v-if-->
           <div
-            class="t-slider"
+            class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
           >
-            <!-- 总长度 -->
-            <div
-              class="t-slider__bar"
-            />
-            <!-- 滑块长度 -->
-            <div
-              class="t-slider__track"
-              style="width: 0%;"
-            />
-            <!-- 滑块操作 -->
-            
+            <!--v-if-->
             <div
-              class="t-slider__handle"
-              style="left: 0%;"
-            />
-            
-            <!-- 刻度内容 -->
+              class="t-slider__line t-slider__line--default t-slider__line--single t-slider__line--disabled"
+              style=""
+            >
+              <div
+                class="t-slider__dot"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-53635720=""
+      >
+        <div
+          class="t-slider t-slider--top t-slider--disabled t-slider--range"
+          data-v-53635720=""
+        >
+          <!--v-if-->
+          
+          <text
+            class="t-slider__range-extreme t-slider__range-extreme--min"
+          >
+            0
+          </text>
+          <div
+            class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+          >
+            <!--v-if-->
             <div
-              class="t-slider__mark"
+              class="t-slider__line t-slider__line--default t-slider__line--disabled"
+              style="left: 0px; right: 0px;"
             >
-              
-              
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
             </div>
           </div>
+          <text
+            class="t-slider__value t-slider__value--max"
+          >
+            100
+          </text>
+          
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-53635720=""
+      >
+        <div
+          class="t-slider t-slider--disabled t-slider--range"
+          data-v-53635720=""
+        >
           <!--v-if-->
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--default t-slider__bar--disabled"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--default t-slider__line--disabled"
+              style="left: 0px; right: 0px;"
+            >
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
           <!--v-if-->
+          
         </div>
       </div>
       
+      
     </div>
   </div>
   <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+    class="tdesign-mobile-demo-block"
     data-v-98828574=""
   >
     <div
       class="tdesign-mobile-demo-block__header"
     >
-      <!--v-if-->
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        03 特殊样式
+      </h2>
       <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        class="tdesign-mobile-demo-block__summary"
       >
-        有标题滑动选择器
+        胶囊型滑块
       </p>
     </div>
     <div
       class="tdesign-mobile-demo-block__slot"
     >
       
+      
       <div
-        class="slider-demo"
-        data-v-98828574=""
+        class="wrapper"
+        data-v-a6c0268e=""
       >
         <div
-          class="flex"
-          data-v-98828574=""
+          class="t-slider"
+          data-v-a6c0268e=""
         >
-          <span
-            style="width: 120px; margin-right: 10px;"
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--capsule"
           >
-             选择器标题 
-          </span>
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--capsule t-slider__line--single"
+              style=""
+            >
+              <div
+                class="t-slider__dot"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-a6c0268e=""
+      >
+        <div
+          class="t-slider t-slider--range"
+          data-v-a6c0268e=""
+        >
+          <!--v-if-->
+          
+          <!--v-if-->
           <div
-            class="t-slider-wrap"
+            class="t-slider__bar t-slider__bar--capsule"
           >
             <!--v-if-->
             <div
-              class="t-slider"
+              class="t-slider__line t-slider__line--capsule"
+              style="left: 0px; right: 0px;"
             >
-              <!-- 总长度 -->
               <div
-                class="t-slider__bar"
-              />
-              <!-- 滑块长度 -->
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
               <div
-                class="t-slider__track"
-                style="width: 0%;"
-              />
-              <!-- 滑块操作 -->
-              
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-a6c0268e=""
+      >
+        <div
+          class="t-slider t-slider--top t-slider--range"
+          data-v-a6c0268e=""
+        >
+          <!--v-if-->
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--capsule"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--capsule"
+              style="left: 0px; right: 0px;"
+            >
               <div
-                class="t-slider__handle"
-                style="left: 0%;"
-              />
-              
-              <!-- 刻度内容 -->
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
               <div
-                class="t-slider__mark"
+                class="t-slider__dot t-slider__dot--right"
               >
-                
-                
+                <div
+                  class="t-slider__dot-value"
+                >
+                  0
+                </div>
+                <div
+                  class="t-slider__dot-slider"
+                />
               </div>
             </div>
+          </div>
+          <!--v-if-->
+          
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-a6c0268e=""
+      >
+        <div
+          class="t-slider"
+          data-v-a6c0268e=""
+        >
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--capsule"
+          >
             <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--capsule t-slider__line--single"
+              style=""
+            >
+              <div
+                class="t-slider__dot"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+          
+          <!--v-if-->
+        </div>
+      </div>
+      <div
+        class="wrapper"
+        data-v-a6c0268e=""
+      >
+        <div
+          class="t-slider t-slider--range"
+          data-v-a6c0268e=""
+        >
+          <!--v-if-->
+          
+          <!--v-if-->
+          <div
+            class="t-slider__bar t-slider__bar--capsule"
+          >
             <!--v-if-->
+            <div
+              class="t-slider__line t-slider__line--capsule"
+              style="left: 0px; right: 0px;"
+            >
+              <div
+                class="t-slider__dot t-slider__dot--left"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+              <div
+                class="t-slider__dot t-slider__dot--right"
+              >
+                <!--v-if-->
+                <div
+                  class="t-slider__dot-slider"
+                />
+              </div>
+            </div>
           </div>
+          <!--v-if-->
+          
         </div>
       </div>
       
+      
     </div>
   </div>
 </div>
@@ -694,173 +1225,127 @@ exports[`Slider > Slider mobileVue demo works fine 1`] = `
 
 exports[`Slider > Slider rangeVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap t-is-value"
+  class="wrapper"
+  data-v-58e1d8c9=""
 >
   <div
-    class="t-slider-wrap__value--left"
-  >
-    0
-  </div>
-  <div
-    class="t-slider"
+    class="t-slider t-slider--range"
+    data-v-58e1d8c9=""
   >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="left: 30%; width: 40%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 30%;"
-    />
-    <div
-      class="t-slider__handle"
-      style="left: 70%;"
-    />
+    <!--v-if-->
     
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
-    >
-      
-      
-    </div>
-  </div>
-  <!--v-if-->
-  <div
-    class="t-slider-wrap__value"
-  >
-    100
-  </div>
-</div>
-`;
-
-exports[`Slider > Slider titleVue demo works fine 1`] = `
-<div
-  class="flex"
->
-  <span
-    style="width: 120px; margin-right: 10px;"
-  >
-     选择器标题 
-  </span>
-  <div
-    class="t-slider-wrap"
-  >
     <!--v-if-->
     <div
-      class="t-slider"
+      class="t-slider__bar t-slider__bar--default"
     >
-      <!-- 总长度 -->
-      <div
-        class="t-slider__bar"
-      />
-      <!-- 滑块长度 -->
-      <div
-        class="t-slider__track"
-        style="width: 0%;"
-      />
-      <!-- 滑块操作 -->
-      
-      <div
-        class="t-slider__handle"
-        style="left: 0%;"
-      />
-      
-      <!-- 刻度内容 -->
+      <!--v-if-->
       <div
-        class="t-slider__mark"
+        class="t-slider__line t-slider__line--default"
+        style="left: 0px; right: 0px;"
       >
-        
-        
+        <div
+          class="t-slider__dot t-slider__dot--left"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
+        <div
+          class="t-slider__dot t-slider__dot--right"
+        >
+          <!--v-if-->
+          <div
+            class="t-slider__dot-slider"
+          />
+        </div>
       </div>
     </div>
     <!--v-if-->
-    <!--v-if-->
+    
   </div>
 </div>
 `;
 
-exports[`Slider > Slider unZeroVue demo works fine 1`] = `
+exports[`Slider > Slider stepVue demo works fine 1`] = `
 <div
-  class="t-slider-wrap"
+  data-v-app=""
 >
-  <!--v-if-->
+  
   <div
-    class="t-slider"
+    class="wrapper"
+    data-v-0f126170=""
   >
-    <!-- 总长度 -->
     <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 0%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 0%;"
-    />
-    
-    <!-- 刻度内容 -->
-    <div
-      class="t-slider__mark"
+      class="t-slider"
+      data-v-0f126170=""
     >
       
+      <!--v-if-->
+      <div
+        class="t-slider__bar t-slider__bar--default"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default t-slider__line--single"
+          style=""
+        >
+          <div
+            class="t-slider__dot"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
       
+      <!--v-if-->
     </div>
   </div>
-  <!--v-if-->
-  <!--v-if-->
-</div>
-`;
-
-exports[`Slider > Slider valueVue demo works fine 1`] = `
-<div
-  class="t-slider-wrap"
->
-  <!--v-if-->
   <div
-    class="t-slider"
+    class="wrapper"
+    data-v-0f126170=""
   >
-    <!-- 总长度 -->
-    <div
-      class="t-slider__bar"
-    />
-    <!-- 滑块长度 -->
-    <div
-      class="t-slider__track"
-      style="width: 50%;"
-    />
-    <!-- 滑块操作 -->
-    
-    <div
-      class="t-slider__handle"
-      style="left: 50%;"
-    />
-    
-    <!-- 刻度内容 -->
     <div
-      class="t-slider__mark"
+      class="t-slider t-slider--range"
+      data-v-0f126170=""
     >
+      <!--v-if-->
       
+      <!--v-if-->
+      <div
+        class="t-slider__bar t-slider__bar--default"
+      >
+        <!--v-if-->
+        <div
+          class="t-slider__line t-slider__line--default"
+          style="left: 0px; right: 0px;"
+        >
+          <div
+            class="t-slider__dot t-slider__dot--left"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+          <div
+            class="t-slider__dot t-slider__dot--right"
+          >
+            <!--v-if-->
+            <div
+              class="t-slider__dot-slider"
+            />
+          </div>
+        </div>
+      </div>
+      <!--v-if-->
       
     </div>
   </div>
-  <div
-    class="t-slider-wrap__value"
-  >
-    50
-  </div>
-  <!--v-if-->
+  
 </div>
 `;
diff --git a/src/slider/__test__/demo.test.jsx b/src/slider/__test__/demo.test.jsx
index 59bb1a10..3eff8377 100644
--- a/src/slider/__test__/demo.test.jsx
+++ b/src/slider/__test__/demo.test.jsx
@@ -4,23 +4,21 @@
 
 import { mount } from '@vue/test-utils';
 import baseVue from '@/slider/demos/base.vue';
-import disableVue from '@/slider/demos/disable.vue';
-import markVue from '@/slider/demos/mark.vue';
+import capsuleVue from '@/slider/demos/capsule.vue';
+import disabledVue from '@/slider/demos/disabled.vue';
+import labelVue from '@/slider/demos/label.vue';
 import mobileVue from '@/slider/demos/mobile.vue';
 import rangeVue from '@/slider/demos/range.vue';
-import titleVue from '@/slider/demos/title.vue';
-import unZeroVue from '@/slider/demos/unZero.vue';
-import valueVue from '@/slider/demos/value.vue';
+import stepVue from '@/slider/demos/step.vue';
 
 const mapper = {
   baseVue,
-  disableVue,
-  markVue,
+  capsuleVue,
+  disabledVue,
+  labelVue,
   mobileVue,
   rangeVue,
-  titleVue,
-  unZeroVue,
-  valueVue,
+  stepVue,
 };
 
 describe('Slider', () => {
diff --git a/src/slider/__test__/index.test.jsx b/src/slider/__test__/index.test.jsx
index 354d995b..56454abf 100644
--- a/src/slider/__test__/index.test.jsx
+++ b/src/slider/__test__/index.test.jsx
@@ -12,41 +12,6 @@ const move = async (target, distance) => {
 
 describe('slider', () => {
   describe('props', () => {
-    it(': range', async () => {
-      const value = [30, 70];
-      const range = true;
-      const disabled = true;
-      const onChange = vi.fn();
-      const wrapper = mount(Slider, {
-        props: {
-          value,
-          range,
-          disabled,
-          onChange,
-        },
-      });
-
-      const $slider = wrapper.find(`.${classPrefix}`);
-      const $bar = wrapper.findAll(`.${classPrefix}__handle`);
-      expect($bar.length).toStrictEqual(value.length);
-
-      const event = {
-        clientX: 82,
-        stopPropagation: vi.fn(),
-      };
-
-      // disabled = true, 禁止点击
-      await $slider.trigger('click', { ...event });
-      expect(onChange).toHaveBeenCalledTimes(0);
-
-      // disabled = false
-      await wrapper.setProps({
-        disabled: false,
-      });
-      await $slider.trigger('click', { ...event });
-      expect(onChange).toHaveBeenCalledTimes(1);
-    });
-
     it(': showExtremeValue', async () => {
       const value = [30, 70];
       const showExtremeValue = true;
@@ -57,8 +22,8 @@ describe('slider', () => {
           showExtremeValue,
         },
       });
-      const $left = wrapper.find(`.${classPrefix}-wrap__value--left`);
-      const $right = wrapper.find(`.${classPrefix}-wrap__value`);
+      const $left = wrapper.find(`.${classPrefix}__value--min`);
+      const $right = wrapper.find(`.${classPrefix}__value--max`);
 
       // min = 0, max = 100 (默认)
       expect(Number($left.text())).toStrictEqual(0);
@@ -74,80 +39,30 @@ describe('slider', () => {
       expect(Number($right.text())).toStrictEqual(newMax);
     });
 
-    it(': marks', async () => {
-      const value = [30, 70];
-      const marks = [0, 25, 50, 75, 100]; // Array
-      const label = false;
-      const wrapper = mount(Slider, {
-        props: {
-          value,
-          marks,
-          label,
-        },
-      });
-      const $mark = wrapper.findAll(`.${classPrefix}__mark-text`);
-      expect($mark.length).toStrictEqual(marks.length);
-      $mark.forEach((item, index) => {
-        expect(Number(item.text())).toStrictEqual(marks[index]);
-        expect(item.attributes('style').includes(`left: ${marks[index]}%;`)).toBeTruthy();
-      });
-
-      const newMarks = { 0: '小', 50: '中', 100: '大' }; // Object
-      await wrapper.setProps({
-        marks: newMarks,
-      });
-
-      const $newMarks = wrapper.findAll(`.${classPrefix}__mark-text`);
-      const marks2 = Object.entries(newMarks);
-      expect($newMarks.length).toEqual(marks2.length);
-      $newMarks.forEach((item, index) => {
-        expect(item.text()).toStrictEqual(marks2[index][1]);
-        expect(item.attributes('style').includes(`left: ${marks2[index][0]}%;`)).toBeTruthy();
-      });
-    });
-
     it(': label', async () => {
       const value = 0;
       const wrapper = mount(Slider, {
         props: {
+          label: true,
           value,
         },
       });
 
       // min = 0, max = 100, label = true (默认)
       // label && 滑块条
-      const $label = wrapper.find(`.${classPrefix}-wrap__value`);
-      const $bar = wrapper.findAll(`.${classPrefix}__handle`);
-      expect($bar.length).toStrictEqual(1);
+      const $label = wrapper.find(`.${classPrefix}__dot-value`);
+      const $bar = wrapper.findAll(`.${classPrefix}__line`);
       expect(Number($label.text())).toEqual(value);
-      expect($bar[0].attributes('style').includes(`left: ${value}%;`)).toBeTruthy();
-
       const newValue = 30;
       await wrapper.setProps({
         value: newValue,
       });
       expect(Number($label.text())).toEqual(newValue);
-      expect($bar[0].attributes('style').includes(`left: ${newValue}%;`)).toBeTruthy();
-    });
-  });
-
-  describe('slots', () => {
-    it(': label', () => {
-      const label = `<div class="t-slider__label">label</div>`;
-      const wrapper = mount(Slider, {
-        slots: {
-          label,
-        },
-      });
-      const $label = wrapper.find(`.${classPrefix}-wrap__value`);
-      expect($label.html().includes(label)).toBeTruthy();
     });
   });
 
   describe('event', () => {
-    it(': change && drag-start && drag-end', async () => {
-      const onDragStart = vi.fn();
-      const onDragEnd = vi.fn();
+    it(': change ', async () => {
       const onChange = vi.fn();
       const value = 0;
       const disabled = true;
@@ -155,27 +70,14 @@ describe('slider', () => {
         props: {
           value,
           disabled,
-          onDragStart,
-          onDragEnd,
           onChange,
         },
       });
-      const $bar = wrapper.find(`.${classPrefix}__handle`);
+      const $bar = wrapper.find(`.${classPrefix}__bar`);
 
       // disabled = true, 禁止滑动
       await move($bar, 120);
-      expect(onDragStart).toHaveBeenCalledTimes(0);
-      expect(onDragEnd).toHaveBeenCalledTimes(0);
       expect(onChange).toHaveBeenCalledTimes(0);
-
-      // disabled = false
-      await wrapper.setProps({
-        disabled: false,
-      });
-      await move($bar, 120);
-      expect(onDragStart).toHaveBeenCalledTimes(1);
-      expect(onDragEnd).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenCalledTimes(2);
     });
   });
 });